爲什麼JavaScript小部件（如Tweet Button和Facebook Like）動態添加腳本？

無論是Tweet Button和Facebook Like小工具告訴你這樣的事情添加到您的HTML：爲什麼JavaScript小部件（如Tweet Button和Facebook Like）動態添加腳本？

<script> 
!function(d,s,id){ 
    var js,fjs=d.getElementsByTagName(s)[0]; 
    if(!d.getElementById(id)){ 
     js=d.createElement(s); 
     js.id=id; 
     js.src="https://platform.twitter.com/widgets.js"; 
     fjs.parentNode.insertBefore(js,fjs); 
    } 
}(document,"script","twitter-wjs"); 
</script>

其動態地將<script>元素，然後加載的實際部件JavaScript的DOM。這是爲什麼動態完成的，而不是直接加載像這樣的小部件（這是更簡單和更清潔）：

<script src="https://platform.twitter.com/widgets.js"></script>

我能想到的是，它推遲腳本加載到頁面加載的唯一原因，但這種可以通過在</body>關閉前放置<script>來輕鬆完成。

來源

2013-02-07 mgorven

這是一個很好的問題，但它確實讓我想起了[這個問題]（http://stackoverflow.com/questions/14666658的/文檔createelementscript-VS-腳本的src /）。 – MikeSmithDev

@MikeSmithDev是的，同樣的事情。我在發佈之前做過搜索，但沒有找到。 – mgorven

因爲執行此代碼的人無法保證足以勝任將腳本放在正確位置的能力。另外，腳本理想情況下應該具有通用性，任何使用任何系統的人都可以輕鬆實現它。

某些CMS不允許對將腳本添加到頁面的位置進行細粒度控制。社交網絡的最大利益是提供更多人可以使用的代碼，而不會產生混淆。

來源

2013-02-07 03:20:14 zzzzBov

當你添加一個像這樣的腳本時，它會異步加載，並且不會阻止加載HTML的其餘部分。如果只是將<script>標記添加到<head>，那麼在腳本完成加載之前，您的HTML的其餘部分將不會被分析，這可能會損害用戶體驗。但是，如果在</body>之前添加<script>塊，則會獲得與異步加載幾乎相同的結果。

（我想這就是zzzzBov指「正確的地方」。）

來源

2013-02-07 03:25:00 bfavaretto

我所說的「正確的地方」的意思是，腳本通常需要在具有特定ID或類的元素或元素集合之後出現。 – zzzzBov

我假設這些腳本所需的所有html都是由腳本自己創建的。我剛剛檢查過，這不是真的（twitter需要你添加一個錨點，而facebook需要一個div）。 – bfavaretto

爲什麼JavaScript小部件（如Tweet Button和Facebook Like）動態添加腳本？

回答

相關問題