Javascript JSONP与IFrame？

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

为了进一步验证我的小部件，嵌入代码如下所示：

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

iframes与JSONP的优缺点是什么

---

iFrame是否存在基于SEO的常见问题

首先，iframe和jsonp不是相互排斥的：一个是呈现手段，另一个是通信手段

您可以在文档包含（即在宿主DOM中创建小部件）或iframe包含（即为小部件创建一个新的、单独的DOM）中进行选择

iframe的优点是沙箱：小部件与主机的javascript和css之间没有冲突。这意味着您可以安全地：

• 使用/定义您想要的任何javascript库
• 使用简单的html代码和简单的css规则（这是维护的明显好处）

至于缺点：

• iframe很重，可能会严重降低主机页的呈现速度
• iframe还将消耗更多的内存和资源，如果主机页针对移动设备，这可能是一个问题

因此，如果有理由假设使用您的小部件的用户愿意“调整”他们的页面，那么就采用文档方式。如果没有，请使用iframe，但要了解限制

---

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

以下是Alex Sexton关于跨域脚本的演示文稿中的一些幻灯片

---

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

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

我选择使用JSONP。您可以在这里看到我如何实现它的详细信息：

一些人给出了他们对搜索引擎优化的看法。我仍然不确定，但是，如果它有助于搜索引擎优化。我刚刚有了一个测试它的想法，我现在就要执行它！我将使用呈现小部件的JavaScript（本例中为提要）创建一个页面。然后，我将使用Google的网站管理员工具来查看Google是否在提要内容中拾取任何关键字。得到结果后，我会把答案贴到上面的链接上

祝我们一切顺利

---

Matt

就性能而言，iframe不一定提供比JSONp更多的负载开销（事实上，许多iframe提供的开销更少）。iframe可以异步加载，而JSONp驱动的小部件可能需要完全加载页面，然后添加对外部资源的引用，从而扩展页面加载。我与许多广告提供商合作过，我可以向您保证，涉及iframe的解决方案是性能杀手。加载小部件所需的时间（例如，如果它需要准备好文档）与宿主页面呈现和可用所需的时间之间存在差异。如果您对JSONP的暗示是正确的，那么没有人会建议将动态脚本加载作为快速页面呈现的解决方案。必须注意有没有人承担这类任务。本演示的要点是，如果您现在正在做跨浏览器的工作，而没有使用像EasyXDM这样的库，那么您就做错了。您正在编写不需要编写的代码，而且您可能做得不好，并且可能错过了规范中的更改。这些库将是最新的更改，并对用户使用的任何浏览器使用适当和/或最佳的方法。如果能在您的答案中看到演示文稿中的一些内容，那将非常好