2022-02-01【技术】使用H5新增MutationObserver，监听iframe的Url变化。

MutationObserver接口提供了监视对DOM树所做更改的能力，通俗点来说就是用来监视 DOM 变动，比如增加删除， 浏览器窗口大小改变导致挤压DOM，属性的变动（width，height，src，style）、文本内容的变动等等。

这里我只用来监听iframe的url变化，来进行操作

代码：

var target = document.getElementById("mainFrame"); // 目标节点iframe
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
    // 创建一个观察器实例
    var observer = new MutationObserver(items => {
        items.forEach(item => {
             console.log(“执行forEach”)
            console.log(item)
            iframeChange(item.oldValue, item.target.src, item.target)
        })
    })
    // 观察器的配置
    var options = {
        childList: false,// 子节点的变动（指新增，删除或者更改） Boolean
        attributes: true, // 属性的变动 Boolean
        subtree: false, //表示是否将该观察器应用于该节点的所有后代节点 Boolean
        attributeOldValue: true, // 表示观察attributes变动时，是否需要记录变动前的属性 Boolean
        characterData: false, // 节点内容或节点文本的变动 Boolean
        attributeFilter: ["src"] // 表示需要观察的特定属性 Array，如['class','src', 'style']
    }
    // 开始观察目标节点
    observer.observe(target, options);
    function iframeChange(oldValue, newValue, iframeData) {
        //console.log("旧地址："+oldValue)
        //console.log("新地址："+newValue)
        if (newValue == oldValye) {
            window.location.href ='......'
           // 或者
            target.src='......'
        }
    }

运行结果