0

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

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

变体 1：

使用 iFrame。

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

变体 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 加载内容，用户能否在两种变体事件中与我的小部件交互？

4

2 回答 2

1

主要区别在于，内容iframe实际上是它们自己的页面，而如果您通过 JavaScript 引入一些 HTML，它将成为原始页面的 DOM 的一部分。当您将其称为“小部件”时，我猜这是您要添加的原始页面的一种组件，因此在我看来，选项 2 更好-这并不是真正iframe的意味着。

于 2013-10-15T16:08:30.727 回答
1

iframe 创建沙盒环境。

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

缺点：由于跨域限制，iframe 的内容很难与主页面交互。

例子：

  • 选项 1 适用于广告或天气小部件
  • 对于在主页上突出显示关键字的小部件，选项 2 会更容易。

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

于 2013-10-15T16:34:43.730 回答