Can Bootstrap.js be used in GAS (Google Apps Script)?
Question
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 ?
2 answers
solution1
13 ACCPTED 2015-03-02 22:19:00
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 .
PS Thanks for the original POST I've now got a nice pretty web app!
solution2
2 2015-01-09 15:10:01
Finally had time to fiddle with your code, after some time in the page you get a error from the server stating that the file "bootstrap.min" was denied. So I created a file "bootstrap.html", copied all of its content to this file, surrounded with script tags, included it in the HTML and voilá, it's working.
The list of changes:
in any code.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
in the mainPage.html
<?!= include('bootstrap'); ?>
The doGet now must use createTemplateFromFile and evaluate()
function doGet(e) {
return HtmlService.createTemplateFromFile('mainPage').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
And an file with all bootstrap surrounded by script tags.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.