在DOM加载之前insertScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

起因

由于工作原因需要联调碧桂园的SDK 大概是以下代码，起初我是放在head中的，因为最初这样调试，包括线上环境都是OK的，可以获取到SDK的内容，换句话说js节点是可以插入到root内的，自从换了一套webpack4的构建、包括加快DNS速度、包括asyncScript标签之后，发现这个插入语句不起作用了，这个事情很神奇。

<script>
var agent = navigator.userAgent.toLowerCase();
//平台、设备和操作系统
var system ={
win : false,
mac : false,
xll : false
}; //检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); function appendScript (url) {
var script=document.createElement("script");
script.setAttribute("src", url);
var heads = document.getElementById("root");
heads.appendChild(script)
} //跳转语句，如果是手机访问就自动跳转到caibaojian.com页面 if(system.win||system.mac||system.xll){
} else if (agent.match(/MicroMessenger/i) == "micromessenger") {
} else if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
console.log('iOS')
appendScript('https://biheopen.bgycc.com/jssdk.js')
appendScript('https://biheopen.bgycc.com/cordova-ios.js')
} else {
console.log('android')
appendScript('https://biheopen.bgycc.com/jssdk.js')
appendScript("https://biheopen.bgycc.com/cordova-android.js")
}
</script>


昨天下午发现的，直到今天早上我调了一下这个问题，总结一下。

这段语句不能写在</body>之前，因为webpack的原因main script也会在</body>之前插入，但是我们希望的是他在main script之前加载，但是这句话appendScript 会让浏览器异步加载script 内容，这样我们就不能保证是main script先加载还是jssdk先加载了。

解决办法

在head中另加一个script片段，把js放在DOMContentLoaded中做处理，这样的话它会在load main script之前去做load jssdk标签，并且是一个同步加载的过程

<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
// 插入
......
}, false);
}
</script>


当然还有其他方式解决这个问题这里就不做深究。