Can Bootstrap.js be used in GAS (Google Apps Script)?

前端 未结 2 900
有刺的猬
有刺的猬 2021-02-09 06:56

In GAS, I want to place HTML content inside tabs like what is described here.

I built a working prototype in this jsFiddle. (Since the code is HTML, it does not rende

相关标签:
2条回答
  • 2021-02-09 07:25

    Finally had time to fiddle with your code, after some time in the page you get a error from the server stating that the file "bootstrap.min" was denied. So I created a file "bootstrap.html", copied all of its content to this file, surrounded with script tags, included it in the HTML and voilá, it's working.

    The list of changes:

    in any code.gs

    function include(filename) {
      return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
    }
    

    in the mainPage.html

    <?!= include('bootstrap'); ?>
    

    The doGet now must use createTemplateFromFile and evaluate()

    function doGet(e) {
      return HtmlService.createTemplateFromFile('mainPage').evaluate()
          .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    }
    

    And an file with all bootstrap surrounded by script tags.

    0 讨论(0)
  • 2021-02-09 07:36

    You don't need to copy the bootstrap JS into a GAS HTML file, it works if you change the URLs you were using to pull in Bootstrap with mainPage.HTML:

    <!DOCTYPE html>
    
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    </head>
    
    <body>
        <!-- Reference: http://getbootstrap.com/javascript/#tabs -->
        <div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a role="tab" data-toggle="tab" aria-controls="home" href="#home">Home</a>
                </li>
                <li role="presentation"><a role="tab" data-toggle="tab" aria-controls="profile" href="#profile">Profile</a>
                </li>
                <li role="presentation"><a role="tab" data-toggle="tab" aria-controls="messages" href="#messages">Messages</a>
                </li>
                <li role="presentation"><a role="tab" data-toggle="tab" aria-controls="settings" href="#settings">Settings</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">Lorem ipsum dolor sit amet</div>
                <div role="tabpanel" class="tab-pane" id="profile">consectetur adipiscing elit,</div>
                <div role="tabpanel" class="tab-pane" id="messages">sed do eiusmod tempor incididun</div>
                <div role="tabpanel" class="tab-pane" id="settings">ut labore et dolore magna aliqua</div>
            </div>
        </div>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
    
    </html>
    

    and in your code.gs

    function doGet(e) {
      return HtmlService
        .createHtmlOutputFromFile('mainPage')
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    }
    

    Here's the app, and here's the script.

    P.S. Thanks for the original POST I've now got a nice pretty web app!

    0 讨论(0)
提交回复
热议问题