gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 08:37:18 24 4
gpt4 key购买 nike

我正在开发某种第三方小部件(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> 在构成 HTML5/js 播放器等的主体

我相信这可以清理/做得更好。所以,我的问题:

  1. 哪些步骤(如果有)可以或应该删除?

  2. 将 HTML5/js 版本放入 iframe 而不是直接将其全部写入页面是个好主意吗?我们在 <head> 中使用的外部 .js 怎么样?此外,在未来,我们可能需要与我们的网站(与 iframe src 相同的域)进行一些双向通信,因此 iframe 提供了一个很好的方式来实现这一点,对吗?

  3. 如果在 iframe 中加载,我是否需要担心任何范围问题(例如,我们播放器的 jQuery 版本与第三方父页面上的内容冲突)?

  4. 我可以/应该做些什么来确保正确的加载顺序,以便在我们的脚本加载/执行时不会对第三方站点产生负面影响?

  5. 有没有比使用 document.write 将最终嵌入代码写入第三方页面(无论是 Flash 的 <object> 代码还是 HTML5/js 的 <iframe> )更好/更智能的选择?我应该将这段代码写入我们包含在原始 js 行中的 div,还是仅将其记录下来安全。将其写入恰好位于其中的任何容器?

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

最佳答案

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

5) 由于 unclenorton 提到的原因,应始终避免使用 document.write。但是,允许用户嵌入它而不需要调用任何 JS 会很好。一种可以考虑的方法是将他们想要将播放器放入的元素的 ID 传递到脚本标记中。

类似于: <div id='my-video'></div> ojit_代码

然后您的脚本可以挂接到 DOMReady/onload 事件并使用 <script src="http://example.com/embed.php?id=12345678&width=400&height=300&nodeId=my-video"></script> 构建 HTML

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

或者通过无聊的 document.write createElement 调用

关于javascript - 使用 javascript 为小部件编写 iframe - 最佳实践/限制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6553584/

24 4 0
文章推荐: html - 另一个 block 级元素上的 margin-top
文章推荐: javascript - 需要 : HTML 5/Javascript UI Component to do "Matching"/"Data Mapping" UI
文章推荐: javascript - 让

的高度决定

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com