监听dom变化

最近项目中需要对于adsense的固定广告是否正常展示,做一个简单的事件打点,来确认广告投放效果。由于固定广告没有回调事件,但是谷歌固定广告对于展示成功的广告,都会主动去更改ins元素上的data-ad-status属性值。因此针对这个特点,我们可以手动实现成功展示和失败展示的事件打点, 以及后期可以针对这个打点,做一些特殊处理。

1、MutationObserver

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知

注意:Mutation Observer 是异步触发,DOM 的变动并不会马上触发,而是要等到当前所有 DOM 操作都结束才触发。避免DOM 变动频繁,导致事件重复执行

使用方式:

  • 1、新建观察者实列
javascript 复制代码
var observer = new MutationObserver(function (mutations, observer) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

每次DOM变动后,回调函数就会触发。mutations是变动数组,observer是观察器实例

  • 2、使用observe,启动监听
ini 复制代码
const insEle = document.querySelector(".adsbygoogle");

var  options = {
  'attributes':true
} ;

observer.observe(insEle, options);

第一个参数:所要观察的 DOM 节点

第二个参数:一个配置对象,指定所要观察的特定变动

  • 3、options设置
    • childList:布尔值,子节点的变动(指新增,删除或者更改)。
    • attributes:布尔值,属性的变动。
    • characterData:布尔值,节点内容或节点文本的变动。
    • subtree:布尔值,表示是否将该观察器应用于该节点的所有后代节点。
    • attributeOldValue:布尔值,表示观察attributes变动时,是否需要记录变动前的属性值。
    • characterDataOldValue:布尔值,表示观察characterData变动时,是否需要记录变动前的值。
    • attributeFilter:数组,表示需要观察的特定属性(比如['class','src'])。

注意:childListattributescharacterData 中,必须有一个参数为 true。否则会抛出 TypeError 异常

  • 4、取消监听
ini 复制代码
observer.disconnect();

调用该方法后,DOM 再发生变动,也不会触发观察器

2、案列

js 复制代码
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxx"
    crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxx" data-ad-format="auto"
    data-full-width-responsive="true"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    const observerAds = () => {
        try {
            const insEle = document.querySelector(".adsbygoogle");
            if (insEle) {
                const observer = new MutationObserver((mutationsList, observer) => {
                    for (let mutation of mutationsList) {
                        if (mutation.type === 'attributes') {
                            if (mutation.attributeName === 'data-ad-status') {
                                console.log(insEle.getAttribute("data-ad-status"));
                                //logEvent(`ad_load_${insEle.getAttribute("data-ad-status")}`);
                                observer.disconnect();
                            }
                        }
                    }
                });
                const config = { attributes: true, attributeOldValue: true };
                observer.observe(insEle, config);
            }
        } catch (error) {
            console.log(error)
        }
    }
    observerAds();
</script>

3、相似api

MutationObserverIntersectionObserver是两个在web开发中常用的观察者对象,都是用于监测特定DOM元素的变化。

差异性:

  • MutationObserver用于监测DOM树的变化。它可以观察指定DOM节点及其子节点的变化,包括节点的添加、删除、属性的变化
  • IntersectionObserver用于监测DOM元素与其父容器或视口的交叉状态。它可以观察指定DOM元素与其父容器或视口的交叉情况,包括元素进入视口、离开视口、部分可见等 之前介绍过IntersectionObserver,可参考之前文章

4、参考:

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui