JSONP 与 IFrame？

Posted 2023-03-03

【中文标题】JSONP 与 IFrame？

【英文标题】：JSONP vs IFrame?

【发布时间】：2011-03-14 13:23:16

【问题描述】：

很快我将需要构建一个小部件，我们的一些客户可以将其嵌入到他们自己的网站中。

为了将来证明我的小部件，嵌入代码将是这样的：

<script type="text/javascript" src="path/to/remote/file.js"></script>
<div id="my_widget"></div>

iframe 与 JSONP 的优缺点是什么？

iframe 是否存在任何常见的基于 SEO 的问题？

【参考方案1】：

首先，iframe和jsonp并不是互斥的：一个是渲染手段，一个是通信手段。

您的选择是在文档内包含（即在宿主 DOM 中创建小部件）或 iframe 内包含（即为小部件拥有一个新的、单独的 DOM）之间。

iframe 的优势在于沙盒：您的小部件与主机的 javascript 和 css 之间不会发生冲突。这意味着您可以安全地：

使用/定义任何你想要的 javascript 库 使用简单的 html 代码和简单的 css 规则（这对维护来说是一个明显的好处）

至于缺点：

iframe 是重量级的，可能会严重减慢主机页面的渲染速度 iframe 也会消耗更多的内存和资源，如果主机页面针对移动设备，这可能是个问题

因此，如果可以合理地假设使用您的小部件的人愿意为此“调整”他们的页面，请采用文档内方式。如果没有，请使用 iframe，但要了解限制。

对于 SEO 问题，只要您动态创建小部件（无论是在文档内还是使用 iframe），搜索引擎都不会看到它。我不知道这是否是你想要的，但这就是你会得到的；）

【讨论】：

就性能而言，iframe 不一定提供比 JSONp 更多的负载开销（事实上，许多提供的开销更少）。 iframe 可以异步加载，而 JSONp 驱动的小部件可能需要页面完全加载，然后添加对外部资源的引用，从而扩展页面加载。

我曾与很多广告提供商合作过，我可以向您保证，涉及 iframe 的解决方案是性能杀手。加载小部件所需的时间（例如，如果它需要准备好文档）与主机页面呈现和可用所需的时间之间存在差异。如果您对 JSONP 的暗示是真的，那么没有人会建议将动态脚本加载作为快速页面呈现的解决方案。

【参考方案2】：

这里有一些幻灯片来自 Alex Sexton 的跨域脚本演示文稿

http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier

不幸的是，它只是幻灯片，因此缺少随附的解释，但可能会有所帮助

【讨论】：

这是相同的屏幕截图。必须注意任何承担此类任务的人。 alexsexton.com/?p=168

本次演示的要点是，如果您现在正在做跨浏览器的工作而不使用像 EasyXDM 这样的库，那么您做错了。您正在编写不需要编写的代码，而且您可能做得不对，并且您可能会错过规范中的更改。这些库将与更改保持同步，并为您的用户使用的任何浏览器使用正确和/或最佳的方法。

很高兴在您的回答中看到演示文稿中的一些材料

【参考方案3】：

如果您进行 API 调用并且只获取数据，则 JSONP 将带来更好的性能。如果要渲染内容，则必须使用 iframe。如果您想阻止主机站点访问您的小部件数据，则 iframe 是您的最佳选择。但是如果你的数据是公开的，那么 JSONP 将导致更简单的实现（因为 iframe 意味着你需要处理大小调整）。另一方面，iframe 提供了良好的 CSS 沙盒，因此您不会与主机页面的 CSS 发生冲突。

【参考方案4】：

我选择使用 JSONP。您可以在此处查看我如何实现它的详细信息： if I allow partner sites to republish my RSS feed, will that boost my SEO ranking?

有些人对 SEO 发表了自己的看法。但是，我仍然不确定它是否有助于 SEO。不过，我只是有一个想法来测试它，我现在就去实现它！我将只使用呈现小部件的 JavaScript（在本例中为提要）创建一个页面。然后，我将使用 Google 的网站管理员工具查看 Google 是否在提要内容中提取了任何关键字。得到结果后，我会在上面的链接中发布答案。

祝我们一切顺利！

马特