在iFrame和異步JavaScript中加載外部跨域HTML內容？

Question

我有一個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加載內容，用戶是否可以在兩個變體事件中與我的窗口小部件交互？

Answer 1

主要的區別在於iframe的內容實際上是他們自己的頁面，而如果你通過JavaScript引入一些HTML，它將成為原始頁面的DOM的一部分。 當你把它稱為“小部件”時，我猜這是你要添加的原始頁面的一部分，所以選項2在我看來是更好的 - 這不是真正的iframe是為了。

Answer 2

iframe創建了一個沙盒環境。

好處：沒有與主頁面沖突的風險（例如樣式）。

缺點：由於跨域限制，iframe的內容很難與主頁面進行交互。

例子：

• 選項1適用於廣告或天氣小工具
• 對於突出顯示主頁上關鍵字的窗口小部件，選項2將更容易。

您當然可以在變體2中使用jQuery（請記住：jQuery只是一堆JavaScript代碼）。 您也可以使用css，您將通過鏈接或樣式標記加載它（與通過腳本標記加載腳本的方式相同）。