Mow*_*zer 5 javascript google-apps-script twitter-bootstrap
在GAS中,我想将HTML内容放在选项卡中,就像这里描述的那样.
我在这个jsFiddle中构建了一个工作原型.(由于代码是HTML,它在这个问题中没有正确呈现,否则我会包含它.所以只需导航到jsFiddle进行查看.它也在这里的GAS项目的index.html文件中.)
但是,当我将jsFiddle迁移到我的GAS项目时,它停止了工作.(再次,请参阅GAS中的index.html文件.)
您可以点击此处查看GAS项目的输出.请注意,选项卡不再像在jsFiddle版本中那样工作.
问题似乎是index.html文件的第47行上的资源未加载.
检查Chrome开发者工具,请注意控制台错误:
Run Code Online (Sandbox Code Playgroud)Uncaught In strict mode code, functions can only be declared at top level or immediately within another function.
注意其他控制台错误:
Run Code Online (Sandbox Code Playgroud)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行)正确加载？或者我们必须采取像这里描述的 "黑客" ？
And*_*rts 13
您不需要将引导程序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);
}
PS感谢原来的POST我现在有一个漂亮的漂亮的网络应用程序!
| 归档时间： |
|
| 查看次数： |
7067 次 |
| 最近记录： |