如何利用MutationObserver保护iframe元素的内联样式？

如果你想阻止iframe元素的内联样式被修改，通过MutationObserver监听style属性变化并强制恢复旧样式是个靠谱的方案，这里直接给你可用的实现代码：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutationRecord) {
    mutationRecord.target.style.cssText = mutationRecord.oldValue
  });
});
observer.observe(elem, { 
  attributes: true, 
  attributeOldValue: true, 
  attributeFilter: ['style'] 
});

关键细节说明： #

• 兼容性处理：开头的兼容性判断覆盖了Chrome、Firefox以及旧版webkit内核浏览器的MutationObserver实现，避免环境差异导致的报错
• 回调逻辑：当style属性被修改时，回调会遍历每个变化记录，直接把目标元素的样式重置为修改前的oldValue，相当于"撤销"了这次样式修改
• 监听配置：attributeFilter: ['style']让观察者只关注style属性的变化，避免监听无关属性浪费性能；attributeOldValue: true是必须的，只有开启这个配置，才能拿到修改前的样式值

注意事项： #

• 记得把代码里的elem替换成你实际要监听的iframe DOM对象
• 这个方案会拦截所有style属性的修改，如果需要允许部分样式变更，得在回调里添加额外的判断逻辑，比如对比新旧样式值，只恢复特定属性

内容的提问来源于stack exchange，提问作者avi dahan