在異步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？

回答

相關問題