Question

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

我在this jsFiddle中构建了一个工作原型。 （由于代码是HTML，因此在这个问题中无法正确呈现，否则我会将其包含在内。所以只需导航到the jsFiddle进行查看。它也位于{的index.html文件中{3}}）。的

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

您可以按my GAS project 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行）正确加载？或者我们必须采取像clicking here那样的“黑客”？

Answer 1

您不需要将引导程序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。

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

Answer 2

最后有时间摆弄你的代码，在页面中一段时间后，你从服务器收到错误，声明文件“bootstrap.min”被拒绝。所以我创建了一个文件“bootstrap.html”，将其所有内容复制到这个文件中，用脚本标签包围，包含在HTML和voilá中，它正在工作。

更改列表：

在任何code.gs

中

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

主页上的

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

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

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

包含所有引导程序的文件，其中包含script个标记。

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

2 个答案: