小部件 - Iframe与JavaScript

Question

我必须开发一个将由第三方网站使用的小部件。这不是要在社交网站中部署的应用程序。我可以给站点人员一个链接，用作iframe的src，或者我可以将其作为JavaScript请求开发。

有人可以告诉我两种方法之间的权衡（IFrame与JS）吗？

Answer 1

Answer 2

为什么不两个都做？

我更喜欢为第三方网站提供如下脚本：

 <script type="text/javascript" src="urlToYourScript"></script>

服务器上的文件如下：

document.writeln('<iframe src="pathToYourWidget" 
name="MagicIframe" width="300" height="600" align="left" scrolling="no" 
marginheight="0" marginwidth="0" frameborder="0"></iframe>');

更新：

使用指向服务器上的网址的iframe的一个缺点是，如果有人点击服务器上指向您服务器的网址，则不会生成“真正的”反向链接。

Answer 3

我确信很多开发者/网站所有者都会喜欢Javascript解决方案，他们可以根据自己的需求进行设计，而不是使用iframe。如果我要包含来自第三方的组件，我宁愿通过Javascript来做，因为我会有更多的控制权。

就易用性而言，两者在简单性方面相似，因此没有真正的权衡。

另外一个想法是，确保您获得一个SSL证书，无论您在哪个域上托管此文件，并在页面通过SSL提供时相应地写出包含声明。如果您的网站所有者有理由使用SSL，他们肯定会喜欢这一点，因为当一个网页提供安全/不安全的内容时，Firefox和其他浏览器会抱怨。

Answer 4

如果窗口小部件可以嵌入到iframe中，那么托管网站的前端性能会更好，因为iframe不会阻止内容下载。但是，正如其他人评论的那样，使用iframe还有其他一些缺点。

如果你在javascript中实现，请在开发时考虑frontend performance best practices。特别是，你应该看看Non blocking javascript loading。 Google Analytics和其他第三方窗口小部件提供商支持这种加载方法。如果您可以在页面底部加载javascript，也会有所帮助。

Answer 5

很高兴知道它不会部署在社交网站上......只会留下网络的其余部分; - ）

最有用的取决于您的小部件。 IFrame和javascript通常用于完全不同的目的，并且可以混合使用（即iframe中的javascript或创建iframe的javascript）。

• IFrames有尺寸问题;如果它应该与页面完全匹配，你知道它在所有浏览器上渲染相同，数据不会溢出它的容器等吗？
• IFrame很简单。它们可以是一个简单的静态HTML页面。
• 使用IFrame时，您可以非常清楚地公开您的小部件。
• 但话又说回来，为什么不将你的第三方网站简单地包含在给定网址的HMTL？然后，如果需要，可以将HTML扩展为包含javascript。
• 纯Javascript允许更多的灵活性，但代价是复杂。

Answer 6

iframe的一大优点：所有CSS和JS都与主页分开，因此现有的CSS才能正常工作。 （如果您希望主机网站为您的内容设置样式，那当然是负面的。）

iframe的大减：它们具有固定的宽度和高度，如果您的内容较大，则会显示滚动条。