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

Question

在 GAS 中，我想将 HTML 内容放在选项卡中，例如 described here。

我在 this jsFiddle. (Since the code is HTML, it does not render properly in this question, otherwise I would have included it. So just navigate to the jsFiddle to view. It is also on the index.html file on the GAS project here 中构建了一个工作原型。）

但是，当我迁移 the jsFiddle to 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 那样的“黑客”？

Answer 1

终于有时间 fiddle 使用您的代码，在页面中一段时间后，您从服务器收到一条错误消息，指出文件 "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);
}

以及所有 bootstrap 都被 script 标签包围的文件。

Answer 2

您不需要将 bootstrap JS 复制到 GAS HTML 文件中，如果您将用于拉入 Bootstrap 的 URL 更改为 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>

在你的 code.gs

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

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

P.S。感谢原创 POST 我现在有了一个漂亮的网络应用程序！

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

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

javascript

google-apps-script

twitter-bootstrap