Bootstrap.js可以在GAS(Google Apps Script）中使用

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

本文关键字：Script Apps Google js GAS Bootstrap      更新时间：2023-09-26

在GAS中，我想将HTML内容放在选项卡中，就像这里描述的那样。

我在这个jsFiddle中构建了一个工作原型。（由于代码是 HTML，因此在这个问题中它无法正确呈现，否则我会包含它。因此，只需导航到jsFiddle即可查看。它也在 GAS 项目的索引.html文件中。

但是，当我将 jsFiddle 迁移到我的 GAS 项目时，它停止了工作。（同样，请参阅 GAS 中的索引.html文件。

您可以通过单击此处查看 GAS 项目的输出。请注意，选项卡不再像在 jsFiddle 版本中那样工作。

问题似乎是 index.html 文件第 47 行上的资源未加载。

检查您的 Chrome 开发者工具时，请注意控制台错误：

Uncaught In strict mode code, functions can only be declared at top level or immediately within another function.

请注意其他控制台错误： 

GET https://static-focus-opensocial.googleusercontent.com/gadgets/proxy?contain…DqEcDcnD&url=https%3A%2F%2Fgetbootstrap.com%2Fdist%2Fjs%2Fbootstrap.min.js
504 (Gateway Timeout)
Uncaught Error: not loaded

所以你有它。有没有人能想到任何方法可以让引导.js资源（第 47 行）正确加载？还是我们必须诉诸像这里描述的"黑客"？

您不需要将引导 JS 复制到 GAS HTML 文件中，如果您更改用于使用 mainPage 拉入 Bootstrap 的 URL，它就可以工作.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>

在你的 code.gs 

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

这是应用程序，这是脚本。

附言感谢您的原始 POST 我现在有一个漂亮的网络应用程序！

终于有时间摆弄你的代码了，在页面中一段时间后，你从服务器收到一个错误，指出文件"bootstrap.min"被拒绝。所以我创建了一个文件"bootstrap.html"，将其所有内容复制到该文件中，用脚本标签包围，将其包含在 HTML 中，瞧，它正在工作。

更改列表：

在任何 code.gs

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

在主页上.html

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

doGet 现在必须使用createTemplateFromFile和evaluate() 

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

以及一个文件，所有引导程序都被script标签包围。

相关文章：