我正在开发第三方小部件(HTML5 / js视频播放器),旨在无缝嵌入第三方网站,与Flash播放器(HTML5 / js播放器)配合使用在这种情况下是一个后备).

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

< script src =“http://example.com/embed.php?id=12345678\u0026amp;width=400\u0026amp;height=300”>< / script>

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

如果它是支持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的范围问题和异步行为从来都不是我的强项……

解决方法:

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

5)出于unclenorton提到的原因,应始终避免使用document.write.但是,允许用户嵌入它而不需要调用任何JS是很好的.要考虑的方法是将要将播放器放入脚本标记的元素的id传入.

就像是：
    < div id ='my-video'>< / div>
    < script src =“http://example.com/embed.php?id=12345678\u0026amp;width=400\u0026amp;height=300\u0026amp;nodeId=my-video”>< / script>

然后你的脚本可以挂钩到DOMReady / onl oad事件并构建HTML而不使用document.write

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

或者通过无聊的createElement appendChild调用