javascript - JSONP 与 IFrame？

Question

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

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

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

iframe 与 JSONP 的优缺点是什么？

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

Answer 1

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

您的选择是在文档内包含(即在宿主 DOM 中创建小部件)或 in-iframe 包含(即小部件具有新的、单独的 DOM)之间。

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

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

至于缺点:

• iframe 是重量级的，可能会严重降低主机页面的呈现速度
• iframe 也会消耗更多的内存和资源，如果主机页面是针对手机的，这可能会成为一个问题

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

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