使用 javascript 为小部件编写 iframe - 最佳实践/限制？答案

【问题标题】：Using javascript to write an iframe for a widget - best practices / limitations?使用 javascript 为小部件编写 iframe - 最佳实践/限制？
【发布时间】：2011-09-27 01:41:26
【问题描述】：

我正在开发各种第三方小部件（HTML5/js 视频播放器），旨在无缝嵌入第三方网站，与 Flash 播放器（HTML5 /js 播放器在这种情况下是一个后备）。

为了允许通过单个网关进行外部嵌入，我们提供的嵌入代码大致如下所示：

<script src="http://example.com/embed.php?id=12345678&width=400&height=300"></script>

注意 .php 扩展名。该脚本的作用是执行一些基本的浏览器代理检测，主要基于“id”查询字符串运行一些后端逻辑，然后将 document.write 的 javascript 回显到实际嵌入代码的页面。

如果它是支持 Flash 的设备，则 document.write 代码是直接的 <object> Flash 嵌入代码（无 iframe；直接到他们的页面）；如果它是 iOS 设备，它会写入 <iframe>，其 src 指向一个 HTML 文档，该文档是 HTML5/javascript 播放器 -- 在 <head> 中有自己的 .js，一组<div>s 在构成 HTML5/js 播放器等的正文中。

我确信这可以清理/做得更好。所以，我的问题：

可以或应该删除哪些步骤（如果有）？
最好先将 HTML5/js 版本放入 iframe，而不是直接将其全部写入页面？我们在<head> 中使用的外部.js 呢？此外，在未来，我们可能需要与我们的网站（与 iframe src 相同的域）进行一些双向通信，因此 iframe 提供了一种很好的方式来实现这一点，对吗？
如果在 iframe 中加载，我是否需要担心任何范围问题（例如，我们播放器的 jQuery 版本与第三方父页面上的内容冲突）？
我可以/应该做些什么来确保正确的加载顺序，这样我就不会在我们的脚本加载/执行时对第三方网站产生负面影响？
有没有比使用 document.write 将最终嵌入代码写入第三方页面（无论是 Flash 的 <object> 代码还是 HTML5/js 的 <iframe>）更好/更智能的选择？我应该将此代码写入原始 js 行中包含的 div，还是仅将其 document.write 写入它恰好位于的任何容器中是否安全？

谢谢！ Javascript 的范围问题和异步行为从来都不是我的强项……

【问题讨论】：

标签： javascript html iframe embed

【解决方案1】：

5) 是的。使用document.write 通常是一种不好的做法。它会延迟 DOM 加载并阻止您的浏览器在完成之前执行任何其他操作。

请考虑选择包装器对象（使用 getElementById 或 jQuery 选择），并将其 innerHTML（或 jQuery html）属性设置为预组装的嵌入代码。

【讨论】：

【解决方案2】：

2,3) 如果使用 iframe，则必须将单独的 jQuery 库加载到该 iframe 中。这可能是使用 iframe 的充分理由（防止版本问题）。在某些情况下，这样做的代价是不必要地下载 jQuery 两次。

5) document.write 由于 unclenorton 提到的原因，应始终避免使用。但是，允许用户在不需要调用任何 JS 的情况下嵌入它会很好。要考虑的一种方法是将他们想要将播放器放入的元素的 id 传递给脚本标签。

类似： <div id='my-video'></div> <script src="http://example.com/embed.php?id=12345678&width=400&height=300&nodeId=my-video"></script>

然后您的脚本可以挂钩到 DOMReady/onload 事件并在不使用 document.write 的情况下构建 HTML

// This should be called from an onload handler
document.getElementById('<?= $_GET['nodeId']?>').innerHTML = myHtmlString;

或通过无聊的createElement appendChild 电话

【讨论】：