Bootstrap.js可以用于GAS（Google Apps脚本）吗？ [英] Can Bootstrap.js be used in GAS (Google Apps Script)?
问题描述
在GAS中，我想将HTML内容放置在标签内，如此处所述。 p>
我在这个jsFiddle 中构建了一个工作原型。 （因为代码是HTML，所以在这个问题中它不能正确显示，否则我会包含它。所以，只需导航到 jsFiddle 进行查看。它也位于 GAS project here。）
但是，当我迁移 jsFiddle 至我的GAS项目，它停止工作。 您可以通过看到GAS项目的输出。 //script.google.com/macros/s/AKfycbyvbP5cDkX90BmY9nYUyP4KQwwU35tgBZI75bXTrd7uZNxns-4/execrel =nofollow>点击此处。 请注意，标签不再像jsFiddle版本中那样工作。
问题似乎是索引行47上的资源
检查您的Chrome开发者工具，注意控制台错误：
未捕获在严格模式代码中，函数只能在顶层或在其他函数中声明。
注意其他控制台错误：
GET https://static-focus-opensocial.googleusercontent.com/gadgets/proxy?contain...DqEcDcnD&url=https ％3A％2F％2Fgetbootstrap.com％2Fdist％2Fjs％2Fbootstrap.min.js
504（网关超时）
未捕获错误：未加载
所以你有它。任何人都可以想办法让bootstrap.js资源（第47行）正确加载吗？或者，我们是否必须采取黑客行为，如此处所述？
您不需要将引导程序JS复制到GAS HTML文件中，它可以在您更改要使用的URL在Bootstrap中使用mainPage.HTML：
<！DOCTYPE html>
< head>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css>
< / head>
< body>
<！ - 参考：http：//getbootstrap.com/javascript/#tabs - >
< div role =tabpanel>
<！ - 导航标签 - >
< li role =presentationclass =active>< a role =tabdata-toggle =tabaria-controls =homehref =＃home> Home< ; / A>
< / li>
< li role =presentation>< a role =tabdata-toggle =tabaria-controls =profilehref =＃profile>个人资料< / a>
< / li>
< li role =presentation>< a role =tabdata-toggle =tabaria-controls =messageshref =＃messages> Messages< / a>
< / li>
< li role =presentation>< a role =tabdata-toggle =tabaria-controls =settingshref =＃settings>设置< / a>
< / li>
< / ul>
<！ - 标签窗格 - >
< div class =tab-content>
< div role =tabpanelclass =tab-pane activeid =home> Lorem ipsum dolor sit amet< / div>
< div role =tabpanelclass =tab-paneid =profile> consectetur adipiscing elit，< / div>
< div role =tabpanelclass =tab-paneid =messages> sed do eiusmod tempor incididun< / div>
< div role =tabpanelclass =tab-paneid =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）;
}
PS感谢原来的POST我现在有一个漂亮的漂亮的网络应用程序！
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 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.)
However, when I migrated the jsFiddle to my GAS project here, it stopped working. (Again, see the index.html file in GAS.)
You can see the GAS project’s output by clicking here. Note the tabs no longer work as they do in the jsFiddle version.
The problem appears to be that the resource on line 47 of the index.html file does not load.
Checking your Chrome developer tools, notice the console error:
Uncaught In strict mode code, functions can only be declared at top level or immediately within another function.
Notice the other console errors:
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
So there you have it. Is there any way anyone can think of to get the bootstrap.js resource (line 47) to load properly? Or must we resort to "hacks" like the one described here?
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!
这篇关于Bootstrap.js可以用于GAS（Google Apps脚本）吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
