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

我有一个HTML小部件，即可以包含在其他页面中的HTML内容。因此，可以说我的内容是来自域A与域B页面包括来自域A的插件我看到两种方法可以包括在域B的页面在异步JavaScript中加载外部跨域HTML内容与异步JavaScript？

注跨域内容：窗口小部件会显示一些图表，即数据可视化。

变式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.如果widget使用ajax加载内容，用户可以在两种变体事件中与我的widget进行交互吗？

来源

2013-10-15 confile

1很好，2是。 – dandavis

FYI选项2不是异步的。 –

@RoryMcCrossan它为什么不是异步？ – confile

iframe创建一个沙盒环境。

效益：与主要页面（例如样式）不冲突的风险。

缺点：由于跨域限制，这是非常困难的iframe的内容与主网页交互。

例子：

选项1是罚款的广告，或者一个天气小部件
选项2将是一个小部件，突出了主网页的关键字更容易。

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

来源

2013-10-15 16:34:43 Christophe

我将如何加载和激活variante中的JQuery，以便我可以在我的自定义widget.js脚本中使用它？用户可以在两种变体中与我的小部件进行交互吗？ – confile

您可以在您的widget.js文件中包含jQuery代码（这是最简单的方法），或者通过widget.js中的脚本标记加载它，或者在widget.js之前加载它。 – Christophe

用户可以在两种变体中与小部件进行交互。它很难更具体，因为它实际上取决于小部件本身。 – Christophe

主要区别在于iframe的内容实际上是它们自己的页面，而如果您通过JavaScript提取某些HTML，它将成为原始页面DOM的一部分。正如你称之为“小部件”，我猜这是你想添加的原始页面的一个组成部分，所以选项2在我看来是更好的 - 这不是什么iframe是为了。

来源

2013-10-15 16:08:30

为什么你认为变种2更好？ – confile

我假设你想让这个小部件与页面的其他部分进行一些交互，并且/或者反之亦然？正如另一张海报所说，'iframe'是沙盒，这使得这非常困难。另外，从性能的角度来看，因为iframe基本上是一个全新的页面，所以构建了一个新的DOM和渲染树，与将另一个HTML块添加到现有页面相比，这在计算上都很昂贵。 –

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

回答

相关问题