2010-06-16 94 views
1

我創建了一個JavaScript小部件,所以第三方(網頁設計師)可以在其網站上發佈鏈接,並且會在其網站上呈現該小部件。目前,我只是一個腳本鏈接標籤這樣做:Asyncronus JavaScript呈現小部件

<div class="some_random_div_in_html_body"> 
<script type='text/javascript' src='http://remotehost.com/link/to/widget.js'></script> 
</div> 

然而,這放慢一個THRID黨的網站上渲染頁面的時候,如果我的網站是一個負載下的副作用。因此,我希望第三方網站異步請求我的網站上的小部件鏈接,然後在小部件鏈接完全加載時將其呈現在其網站上。 Google Analytics(分析)JavaScript代碼片段似乎有很多異步代碼可以用來模擬非常好的異步請求,但我想知道是否可以修改它,以便在第三方網站上呈現內容。

使用下面的示例,我希望http://mysite.com/link/to/widget.js的內容在「消息」ID字段中顯示某些內容。

<HTML> 
<HEAD><TITLE>Third Party Site</TITLE><STYLE>#message { background-color: #eee; } </STYLE></HEAD> 
<BODY> 
<div id="message">asdf</div> 
<script type="text/javascript"> 
    (function() { 
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = 'http://mysite.com/link/to/widget.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s); 
})(); 
</script> 
</BODY> 
</HTML> 

,如果我想要做的,我不知道構成跨站點腳本(仍然是概念有點模糊),但我想知道如果我想要做的是可能的。或者,如果任何人有任何其他方法來有效地創建JavaScript小部件,我會很感激任何建議。 感謝您閱讀本文。 Joe

回答

1

對不起,說crossdomain xhr被所有瀏覽器阻止。谷歌分析google.load()函數實際上將腳本標籤添加到head元素,而不是使用xhr。 「異步」屬性是HTML5的一部分,只在Firefox 3.6中實現。

您可以使用事件偵聽器在文檔加載時動態加載腳本,並添加小部件到預定元素(即使用id)。

+0

感謝澄清digitalFresh。我會研究事件監聽器的方法。 – 2010-06-18 22:10:54