Bootstrap.js 可以在 GAS（Google Apps 脚本）中使用吗？答案

【问题标题】：Can Bootstrap.js be used in GAS (Google Apps Script)?Bootstrap.js 可以在 GAS（Google Apps 脚本）中使用吗？
【发布时间】：2015-01-09 15:02:11
【问题描述】：

在 GAS 中，我想将 HTML 内容放在标签中，例如 described here。

我在this jsFiddle 中构建了一个工作原型。 （由于代码是 HTML，它不能在这个问题中正确呈现，否则我会包含它。所以只需导航到 the jsFiddle 即可查看。它也在 GAS project here 上的 index.html 文件中.)

但是，当我将 the jsFiddle 迁移到 my GAS project here 时，它停止工作。 （再次参见 GAS 中的 index.html 文件。）

您可以通过clicking here 看到 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

所以你有它。有没有人可以想到让 bootstrap.js 资源（第 47 行）正确加载？还是我们必须求助于像described here 这样的“黑客”？

【问题讨论】：

标签： javascript twitter-bootstrap google-apps-script

【解决方案1】：

您不需要将 bootstrap JS 复制到 GAS HTML 文件中，如果您使用 mainPage.HTML 更改用于拉入 Bootstrap 的 URL，它就可以工作：

<!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);
}

Here's the app 和 here's the script。

附：感谢您的原始帖子，我现在有一个漂亮漂亮的网络应用程序！

【讨论】：

【解决方案2】：

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

改动列表：

在任何 code.gs 中

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

在mainPage.html中

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

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

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

还有一个所有引导程序都被script标签包围的文件。

【讨论】：

根据您的建议，我尝试为 jQuery 资源和 bootstrap.js 资源删除 .min 。但这没有用。（顺便说一句，我注意到现在加载
更新答案，谷歌无法检索 bootstrap.js。