Can Bootstrap.js be used in GAS (Google Apps Scrip

2019-04-29 17:41发布

站内问答 / JavaScript
1423 2 4

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条回答
Melony?
2楼-- · 2019-04-29 18:13

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.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
3楼-- · 2019-04-29 18:37

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!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)