Question

我有一个HTML小部件，即可以包含在其他页面中的HTML内容。因此，假设我的内容来自域A，域B中的页面包含来自域A的窗口小部件。我看到两种方法可以在域B的页面中包含跨域内容。

注意：小部件将显示一些图表，即数据可视化。

Variante 1：

使用iFrame。

<iframe src="domain_A_url_to_widget" width="200" height="400" name="foreignWidget">
  <p>no Browser support</p>
</iframe>

Variante 2：

使用异步JavaScript。

<script type="text/javascript">
  (function(d){
    var f = d.getElementsByTagName('SCRIPT')[0],
        p = d.createElement('SCRIPT');
    p.type = 'text/javascript';
    p.async = true;
    p.src = '//domainA.com/js/widget.js';
    f.parentNode.insertBefore(p, f);
  })(document);
</script>

1。两种变体的优点和缺点是什么？

2。是否有可能在变体2中使用JQuery和CSS？

第3。如果窗口小部件使用ajax加载内容，用户是否可以在两个变体事件中与我的窗口小部件交互？

Answer 1

主要区别在于iframe的内容实际上是他们自己的页面，而如果你通过JavaScript引入一些HTML，它将成为原始页面的DOM的一部分。当你把它称为“小部件”时，我猜这是你要添加的原始页面的一部分，所以在我看来，选项2是更好的 - 这不是真正的{ {1}}适用于。

Answer 2

iframe会创建一个沙盒环境。

好处：没有与主页面冲突的风险（例如样式）。

下行：由于跨域限制，iframe的内容很难与主页进行交互。

示例：

选项1适用于广告或天气小工具
选项2将更容易。

你当然可以在变体2中使用jQuery（记住：jQuery只是一堆JavaScript代码）。您也可以使用css，您可以通过链接或样式标记加载它（与通过脚本标记加载脚本的方式相同）。

在iFrame和异步JavaScript中加载外部跨域HTML内容？

2 个答案: