浏览器 DOMContentLoaded 事件的监听触发

DebugMi 发布于 2022-02-20编辑于 2022-02-20阅读:29

开发 JSSDK 后, SDK 使用者会将 script 插入到各个位置,所以,在 SDK 里把入口方法放到 DOMContentLoaded 事件回调里是很有必要,以免遇到 DOM 没有准备好就操作的报错

document.addEventListener('DOMContentLoaded', () => main())

function main() {
    ...
}

当一切搞定后,发给同事接入测试时,发现无法运行,看了现场之后发现同事居然是用异步插入 script 的方式来引入,DOMContentLoaded 事件直接罢工,没有被触发

const script = document.createElement('script')
script.src = 'https://sdk.min.js'
document.querySelector("body").append(script)

document 有一个属性 document.readyState,表示 document 目前的加载状态,他有三个值:loading,interactive,complete。分别是加载中,文档已完成解析(可能脚本之类的资源还在加载),实际开发中发现,IE 只支持 complete,必要时需要做兼容,文档和所有资源都加载完成。

上面同事动态插入 SDK 时,document 是处于 interactive 状态的,此时监听 DOMContentLoaded,无法被触发,因此,SDK 运行时,需要判断状态,当 loading 时监听 DOMContentLoaded,其余状态直接执行入口方法

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => main())
} else {	
    main()
}

归纳一下

  • document.readyState 有 3 个值:loading,interactive,complete。但是 IE 只有 complete
  • DOMContentLoaded 只有在 loading 状态时监听才可以正常被触发
0