如何在運行時動態添加網頁小工具到頁面

我有一個頁面，我想演示一些網頁小工具。當用戶點擊「添加小工具」按鈕時，我想動態添加他/她在空白DIV的同一頁面上選擇的小工具。例如，以下是Addthis按鈕的代碼。我試圖用javascript將它添加到DOM。我嘗試了innerHTML和document.write（），兩者都不起作用。標籤最終在DOM中，但是src指向永遠不會執行的JavaScript代碼。如何在運行時動態添加網頁小工具到頁面

<div class="addthis_toolbox addthis_default_style"> 
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4cac9ad61a93c252" class="addthis_button_compact">Share</a> 
</div> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cac9ad61a93c252"></script>

我怎樣才能獲得動態添加JavaScript的執行，或者如果這是不可能的？請幫忙。謝謝。

來源

2010-10-06 Feng Chen

這應該工作。腳本中是否有錯誤？ – sje397 2010-10-06 16:12:45

我使用FF錯誤控制檯進行了檢查，並且沒有錯誤。使用innerHTML時，「共享」鏈接將顯示，但腳本沒有得到執行。當我使用document.write（）技術時，我得到了相同的結果。但是，如果我導航到document.write（），然後單擊瀏覽器後退按鈕，則Addthis按鈕正確顯示。 – 2010-10-06 17:45:05

您可以隨時包含addThis腳本塊，並只在需要時插入DIV標記。這樣，無論使用與否，腳本都會運行。

問題是，出於安全原因（XSS），瀏覽器不允許您在頁面加載完成後加載來自外部URL的腳本。另外，包含腳本標記不會自動執行它。

來源

2010-10-06 16:59:13 Detect

這將適用於一個小部件，但它不是動態的。我需要它是動態的，因爲我無法確定用戶可能選擇多少個小部件。我想知道這些Web混搭應用程序是如何工作的。他們都動態地加載腳本，不是嗎？ – 2010-10-06 17:48:07

這個怎麼樣？

function loadScript(url){ 
    var element1 = document.createElement("script"); 
    element1.src = url; 
    element1.type="text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(element1); 
}

來源

2010-10-06 18:20:24 Detect

addthis腳本仍然不會使用這種技術加載。 – 2010-10-08 00:03:46

如何在運行時動態添加網頁小工具到頁面

回答

相關問題