IE11中MutationObserver语法错误排查求助

看起来你碰到了IE11对MutationObserver的兼容性坑，结合你的代码和报错指向observer.observe()的情况，主要有几个可能的诱因，对应不同的修复方案：

1. 回调参数命名与全局构造函数冲突 #

你的MutationObserver回调里第二个参数命名成了MutationObserver，这和全局的MutationObserver构造函数同名了。IE11的JS引擎对这种命名冲突的处理比Chrome/Firefox严格得多，很可能导致语法解析错误或者运行时异常。

修复方案： #

把参数名改成不冲突的，比如observer：

var observer = new MutationObserver(function (mutationRecords, observer) { 
    dataTable = null; 
    tabla = null; 
    tabActiva = $('.tab-content').find('.active'); 
    formFiltro = tabActiva.find('form'); 
    tabla = tabActiva.find('table'); 
});

2. IE11对attributeFilter的兼容性限制 #

虽然MDN标注IE11支持attributeFilter，但实际在同时监听childList和属性变化、或者结合subtree使用时，容易出现兼容性问题，导致observe()方法报错。

修复方案： #

既然你是要监听Bootstrap标签切换（本质是监听active类的变化），可以简化观察配置，聚焦在属性变化上：

observer.observe(target, { 
    attributes: true, // 必须显式开启属性监听
    attributeFilter: ['class'], 
    subtree: true 
});

如果确实需要同时监听子节点变化，可以分开创建两个Observer分别处理，避免参数组合带来的兼容性问题。

3. 目标元素target不存在导致报错 #

如果页面初始化时，.tab-content > .tab-pane还没渲染完成（比如依赖异步加载、或者DOM是动态生成的），get(0)会返回null。IE11里调用observer.observe(null, ...)会直接抛出错误，而Chrome/Firefox会更宽松地处理这种情况。

修复方案： #

确保target存在后再初始化Observer：

var observer = new MutationObserver(function (mutationRecords, observer) { 
    // 你的回调逻辑
});

$(document).ready(function() {
    var target = $('.tab-content > .tab-pane').get(0);
    if (target) {
        observer.observe(target, { 
            childList: true, 
            attributeFilter: ['class'], 
            subtree: true 
        });
    } else {
        console.warn('目标元素未找到，无法初始化MutationObserver');
    }
});

额外兜底方案：引入MutationObserver Polyfill #

如果以上方法都没解决问题，可以给IE11加个Polyfill来补全MutationObserver的功能。下面是一个简化版的Polyfill，直接内嵌到你的代码里就行：

// MutationObserver Polyfill 兼容IE11
if (!window.MutationObserver) {
    window.MutationObserver = (window.WebKitMutationObserver || window.MozMutationObserver) || function(callback) {
        const self = this;
        this._listeners = [];

        this.observe = function(target, options) {
            // 监听属性变化
            if (options.attributes) {
                const attrCallback = function(e) {
                    if (options.attributeFilter && !options.attributeFilter.includes(e.attrName)) return;
                    callback([{
                        type: 'attributes',
                        target: e.target,
                        attributeName: e.attrName,
                        oldValue: e.prevValue
                    }], self);
                };
                target.addEventListener('DOMAttrModified', attrCallback);
                this._listeners.push({target, event: 'DOMAttrModified', handler: attrCallback});
            }

            // 监听子节点变化
            if (options.childList) {
                const insertCallback = function(e) {
                    callback([{
                        type: 'childList',
                        target: target,
                        addedNodes: [e.target]
                    }], self);
                };
                const removeCallback = function(e) {
                    callback([{
                        type: 'childList',
                        target: target,
                        removedNodes: [e.target]
                    }], self);
                };
                target.addEventListener('DOMNodeInserted', insertCallback);
                target.addEventListener('DOMNodeRemoved', removeCallback);
                this._listeners.push({target, event: 'DOMNodeInserted', handler: insertCallback});
                this._listeners.push({target, event: 'DOMNodeRemoved', handler: removeCallback});
            }
        };

        this.disconnect = function() {
            this._listeners.forEach(({target, event, handler}) => {
                target.removeEventListener(event, handler);
            });
            this._listeners = [];
        };

        this.takeRecords = function() {
            return [];
        };
    };
}

把这段代码放在你的MutationObserver初始化代码之前，就能为IE11提供基础的MutationObserver支持。

内容的提问来源于stack exchange，提问作者Andre Villanueva