使用MutationObserver检测div内容变化在IE10中失效的问题排查

嘿，咱们来解决你遇到的IE10下MutationObserver不生效的问题！先从最常见的排查点入手，再给你几个靠谱的替代方案。

先检查Polyfill的加载顺序 #

你用的那个Polyfill本身是靠谱的，但大概率是加载时机不对导致的失效。IE10本身没有MutationObserver这个全局对象，所以你必须在自己的业务代码之前加载Polyfill脚本——要是你的业务代码先跑了，那时候MutationObserver还没被定义，自然没用。

给你个正确的加载顺序示例：

<!-- 先加载Polyfill脚本 -->
<script src="path/to/MutationObserver.js"></script>
<!-- 再加载你的业务逻辑代码 -->
<script src="your-business-script.js"></script>

另外，你可以打开IE10的开发者工具（按F12）验证一下：

1. 到「网络」标签里确认Polyfill脚本已经成功加载；
2. 在「控制台」输入typeof MutationObserver，如果返回"function"，说明Polyfill已经生效了。

如果Polyfill还是不工作，试试这两个替代方案 #

要是确认Polyfill加载没问题但依然失效，可能是这个Polyfill对某些场景支持有限，试试下面两种更稳妥的兼容方案：

方案1：定时轮询检测DOM变化 #

这是最通用的兼容方案，虽然性能比MutationObserver稍差，但对IE10完全友好。核心思路就是定期检查目标div的内容，和上一次的记录对比，不一样就触发你的处理逻辑。

示例代码：

function watchDivChanges(targetDiv, onChange) {
  let lastContent = targetDiv.innerHTML;
  // 可根据需求调整轮询间隔，100-500ms之间比较平衡
  const checkInterval = setInterval(() => {
    const currentContent = targetDiv.innerHTML;
    if (currentContent !== lastContent) {
      onChange();
      lastContent = currentContent;
    }
  }, 200);

  // 返回清除定时器的方法，方便后续停止监听
  return () => clearInterval(checkInterval);
}

// 使用方式
const myTargetDiv = document.getElementById('your-target-div');
const stopWatching = watchDivChanges(myTargetDiv, () => {
  console.log('Div内容发生变化啦！');
  // 这里写你的处理逻辑
});

// 不需要监听时调用
// stopWatching();

方案2：利用IE专属的onpropertychange事件 #

IE10支持onpropertychange事件，当元素的属性（比如innerHTML）被JavaScript修改时会触发。不过要注意：这个事件只对JS触发的属性变化有效，用户手动输入或者其他非JS触发的变化可能检测不到，但大部分业务场景下够用。

示例代码：

const myDiv = document.getElementById('your-target-div');
myDiv.onpropertychange = function(event) {
  // 只监听innerHTML的变化
  if (event.propertyName === 'innerHTML') {
    console.log('Div内容变了！');
    // 你的处理逻辑
  }
};

额外小提示 #

• 如果你的div里有子元素动态更新，轮询的时候可以考虑检查outerHTML或者更细粒度的属性，避免漏掉变化；
• 轮询间隔别设得太小，100-500ms的区间既能保证灵敏度，又不会过度消耗IE10的性能。

内容的提问来源于stack exchange，提问作者The Bobster