发表新帖
发表新帖

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

前端 未结
关注
2 909
有刺的猬
有刺的猬 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)
 看不清?
提交回复
热议问题