单页面应用监控白屏方案-MutationObserver

最新推荐文章于 2024-07-03 17:01:33 发布

yun_hou

最新推荐文章于 2024-07-03 17:01:33 发布

阅读量510

点赞数

分类专栏： react vue js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yun_hou/article/details/127025082

版权

vue 同时被 3 个专栏收录

19 篇文章 2 订阅

订阅专栏

13 篇文章 2 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

原理：使用webAPI 的 MutationObserver 属性监控根元素内的dom数量，如果没有dom则白屏

    // 跟节点
    const targetNode = document.getElementById('container')
    if (targetNode) {
        const config = { childList: true } // 观察器的配置（需要观察什么变动）
        const callback = function (mutationsList) {
            console.log(mutationsList, '11111')
            // 当观察到变动时执行的回调函数
            for (let i = 0; i < mutationsList.length; i++) {
                let mutation = mutationsList[i]
                if (mutation.type === 'childList'&&targetNode?.children?.length === 0) {
                    console.log('白屏')
                    break
                }
            }
        }

        if (window?.MutationObserver) {
            const observer = new MutationObserver(callback)
            observer.observe(targetNode, config)
        }
    }