JSONP vs IFrame？

Question

很快我就需要构建一个我们的客户可以嵌入自己网站的小部件。

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

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

iframes与JSONP的优点和缺点是什么？

iframe有任何常见的基于SEO的问题吗？

Answer 1

首先，iframe和jsonp不是互斥的：一个是渲染均值，另一个是通信均值。

您的选择取决于文档内包含（即在主机DOM中创建小部件）或in-iframe包含（即小部件具有新的独立DOM）。

iframe的优点是沙盒：小部件与主机的javascript和css之间没有冲突。这意味着你可以放心：

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

至于缺点：

• iframe重量很重，可能会严重降低主页翻译速度
• iframe也会占用更多的内存和资源，如果主页以移动设备为目标可能会出现问题

因此，如果假设使用您的小部件的人愿意为其“适应”他们的页面是合理的，那么就采用文档内的方式。如果没有，请使用iframe但要了解限制。

至于SEO问题，只要你动态创建小部件（无论是文档内还是iframe），搜索引擎都不会看到它。我不知道如果这就是你想要的，但那就是你会得到的;）

Answer 2

来自Alex Sexton的跨域脚本编写演示文稿中的一些幻灯片

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

不幸的是它只是幻灯片所以缺少相应的解释，但可能会有所帮助

Answer 3

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

Answer 4

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

有些人对SEO发表意见。但是，我仍然不确定它是否有助于搜索引擎优化。我有一个想法来测试它，我现在要把它拿出来！我将使用呈现窗口小部件的JavaScript（在这种情况下为feed）创建一个页面。然后，我将使用Google的网站管理员工具查看Google是否选择了Feed内容中的任何关键字。在得到结果后，我会将答案发布到上面的链接中。

祝福我们最好！

马特