让我的 HTML 导入不仅仅在 Chrome 上运行的最佳方法是什么?

Question

我在 Bubble.is 中有一个完全成熟的应用程序，涉及患者通过视频聊天与临床医生预约。 如果可能的话，我想避免仅仅为视频聊天部分构建客户端-服务器设置。 这就是为什么OpenTok的嵌入对我来说很突出。 无论 Bubble.is 添加到标题中，当我直接嵌入它时，它都会破坏 OpenTok 的嵌入文件。 因此，相反，我从我拥有的另一个域上的html文件中提供OpenTok嵌入。 所以现在我有了应用程序(app.foo.bar(和OpenTok嵌入(www.foo.bar/opentok.html(，并且正在尝试使用HTML导入。

嵌入式代码(标头(：

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<script src="https://foo.bar/scripts/webcomponents-lite.js"></script>
<link rel="import" href="https://foo.bar/video/index.php/embed-2">

嵌入式代码(正文(：

<script> window.addEventListener('HTMLImportsLoaded', function() {
var link = document.querySelector('link[rel="import"]');
var content = link.import;
 //Grab DOM from embedded OpenTok.
var el = document.querySelector('#otEmbedContainer');
document.body.appendChild(el.cloneNode(true));});</script>

正如预期的那样，这在Chrome桌面上运行良好，但在其他地方却没有。 我可以采取哪些最佳方法来修改此现有代码，以便我可以(至少(在移动 Web 上运行它？

Answer 1

您可以在 Bubble.io 中使用 iframe。您不需要使用 HTML 导入。创建 OpenTok 嵌入时，请将嵌入的网站 URL 设置为https://your-app-name.bubbleapps.is(将your-app-name替换为 Bubble.is 应用的名称(。然后在 Bubble.is 中，将 HTML 元素添加到您的应用，并将 OpenTok 嵌入的 iframe 代码粘贴为该元素的代码。此外，您需要将此属性添加到 iframe： allow="microphone; camera"

因此，粘贴到 Bubble.is HTML 元素中的代码如下所示：

<iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=your-embed-id-xxxxx&room=DEFAULT_ROOM&iframe=true" 
width=800 height=640 allow="microphone; camera" >
</iframe>

单击 Bubble.is 编辑器中的"预览"按钮，OpenTok 嵌入即可正常工作。