在新的 Google 协作平台中嵌入使用 javascript 的网站答案

【问题标题】：Embed a website utilizing javascript in new Google Sites在新的 Google 协作平台中嵌入使用 javascript 的网站
【发布时间】：2019-03-02 19:23:23
【问题描述】：

以下代码加载了几个外部 js 文件并在我的网络服务器上运行良好：

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
<body>
    <div>
        <canvas id="myCanvas"></canvas>
        <script src="https://drive.google.com/uc?export=download&id=1lISKkEz4JTrPEFWKqpid-6sBByLP3wPY">
        </script>
        <script src="https://drive.google.com/uc?export=download&id=1lRAFdKQNu3YhBBDNEtj2WKDuLVM290pp">
        </script>
    </div>
</body>

将此代码嵌入新的 Google 协作平台会生成一个空白画布。

为了补救，我创建了一个只运行 javascript 代码的网页，并尝试使用以下代码将其作为 iframe 嵌入到 Google 协作平台中：

<p align="center">
<iframe id="Bubbles"
    title="Bubbles"
    width="70%"
    height="250"
src="http://edtech2.boisestate.edu/joshuawatson/hiddenpage2.html">
</iframe>
</p>

这段代码在我的网络服务器上也能正常运行（通过访问 src 页面并看到工作动画表明），但在新的 Google 协作平台中仍然会产生一个空白框架。

关于如何让这个脚本在新的 Google 协作平台上运行有什么想法吗？

请注意，这实际上是一个“玩具”示例，我尝试运行的实际脚本更复杂，更符合我的需求。

【问题讨论】：

标签： javascript html iframe google-sites-2016

【解决方案1】：

为了其他需要这个的人，我会发布答案，但这并不是那么有趣。

第一个问题是某些浏览器（例如 Google Chrome）在没有明确许可的情况下不会加载不安全的脚本。

第二个问题是我最初发布的服务器拒绝了来自其他域的 iframe 请求。

将页面托管为来自 Github 页面的嵌入式 iframe 为我解决了这两个问题。我创建了一个示例 Github 页面来演示如下：

例如：

<p align="center">
<iframe id="Bubbles"
    title="Bubbles"
    width="70%"
    height="250"
src="https://uploadbakonbox.github.io/">
</iframe>
</p>

【讨论】：