Question

花了好几个小时试图找到导入动态JS的最佳方法后，我找到了2个替代品。第一个是由Analytics和许多着名的JS库使用，但第二个方法更小，更容易理解，为什么Google Analytics或其他主要JS库不使用它？

1）

a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="http://sitepor500.com.br/scripts.js?1";c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c);

2）

a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="http://sitepor500.com.br/scripts.js?2";document.getElementsByTagName("script")[0].parentNode.appendChild(a);

我知道这两个方法看起来几乎相同，但第一个方法在页面中的第一个标记之前插入脚本，第二个方法将脚本插入页面中第一个嵌套的兄弟。

由于第二种方法更小，更容易理解，为什么不使用它？某些特定浏览器版本或品牌是否有问题？

感谢。

Answer 1

它与浏览器无关，它是关于：

c.parentNode.insertBefore(a,c);

和

c.parentNode.appendChild(a);

第一个是尝试在页面中的所有其他脚本标记之前注入脚本。这部分：

document.getElementsByTagName("script")[0]

获取页面中的第一个脚本标记，然后在此之前注入脚本标记。 这是什么？，因为，第一个解决方案想要在页面上添加脚本并确保它是第一个执行的。但是第二个解决方案只是想要一个脚本添加到页面，如果你使用其他库，如jQuery，bootstarp或其他什么，并且你已经在脚本中使用过它们，你应该使用第二个解决方案，因为正如我所说，如果您使用第一个解决方案，您将无法访问页面中的任何其他脚本。

但是如果您更改第一种方法：

//...
var scripts=document.body.querySelectorAll("script:last-child");
c=scripts[scripts.length];

现在c这是页面中的最后一个脚本标记，如果你使用insertBefore附加你的脚本标记：

c.parentNode.insertBefore(a,c);

它在c DOM级别的第一个脚本标记之前插入。它在同一DOM级别的其他脚本之前执行。所以insertBefore与第一个要执行的脚本标记没有任何关系，如果是第一个方法，那么原因是你在整个DOM中选择第一个脚本标记：

c=document.getElementsByTagName("script")[0]

并在此之前插入脚本标记：

c.parentNode.insertBefore(a,c);

Answer 2

第一种方法

parentNode.insertBefore(a,c);

确保它会在指定的DOM对象{此处： c }的开头附加一个DOM对象{here： a }。而

parentNode.appendChild(a);

确保它将在指定位置DOM Object的末尾附加任何DOM对象。

因此，第一种方法可确保首先执行附加的脚本。例如：考虑后续脚本需要{here： a }来正确执行的情况。

使用2种不同的方法动态加载Javascript

2 个答案: