Question

Tweet Button和Facebook Like小部件都会告诉您向HTML中添加以下内容：

<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>

动态地向DOM添加<script>元素，然后加载实际的小部件JavaScript。为什么这是动态完成而不是像这样直接加载小部件（这更简单，更清洁）：

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

我能想到的唯一原因是它会延迟脚本加载，直到页面加载完毕，但这可以通过在<script>关闭之前放置</body>来轻松完成。 / p>

Answer 1

因为实现此代码的人员无法保证能够将脚本放在正确的位置。此外，该脚本在理想情况下具有足够的通用性，任何使用任何系统的人都可以轻松实现它。

某些CMS不允许对脚本添加到页面的位置进行细粒度控制。为社交网络提供最佳利益，提供更多人可以使用的代码，而不会产生混淆。

Answer 2

当您添加这样的脚本时，它会异步加载，并且不会阻止其他HTML加载。如果它只是添加到<script>的{{1}}标记，则在脚本完成加载之前，不会解析其余HTML，这可能会影响用户体验。但是，如果在<head>之前添加了<script>块，则会得到几乎相同的异步加载结果。

（我想这就是zzzzBov在“正确的地方”的含义。）

为什么JavaScript小部件（如Tweet Button和Facebook Like）动态添加脚本？

2 个答案: