IE 11 上的 MutationObserver 语法错误

Posted 2023-02-19

【中文标题】IE 11 上的 MutationObserver 语法错误

【英文标题】：MutationObserver syntax error on IE 11

【发布时间】：2018-11-08 15:24:31

【问题描述】：

我正在使用 MutationObserver 在切换面板内容时更改某些变量的值（我正在使用 Bootstrap 选项卡）。在 Chrome 和 Firefox 中一切正常，但由于某种原因，当我用 IE 测试它时，它在控制台中显示语法错误并且脚本中断。这是我的 MutationObserver 代码：

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

    observer.observe(target, 
        childList: true,
        attributeFilter: ['class'],
        subtree: true
    );

控制台指出错误在observer.observe() 上。我不知道发生了什么。提前致谢。

以防万一，这是我的“目标”：

var target = $('.tab-content > .tab-pane').get(0);

【问题讨论】：

它到底说的是什么错误？这看起来不像是语法错误

调试器截图：prntscr.com/jo9uo6

如果我评论observer.observe() 行，它可以工作，但我需要那行。

你能发布 actual 错误（可以在控制台中看到的那个）吗？无论是什么 IDE，都没有提供任何细节

@CertainPerformance 那是实际的错误。他提供了 IE11 控制台的屏幕截图作为分离窗口。

【参考方案1】：

使用MutationObserver，可以过滤属性，但前提是您首先要观察元素属性。因此，选项 attributeFilter 仅在 attributes 设置为 true 时适用。

如果您指定 attributeFilter 而不将 attributes 设置为 true，则 IE11 将引发语法错误，而 Chrome 和 Firefox 将默默地忽略 attributeFilter。

要解决语法错误，请将attributes 设置为true 或删除attributeFilter。

【参考方案2】：

根据MDN，如果指定了attributeFilter属性，

没有必要也将attributes 设置为true，因为这是暗示的。

DOM Living Standard specification 将 attributeFilter 定义为

如果不是全部，则设置为属性本地名称列表（没有命名空间） 需要观察属性突变并且attributes 是true 或 省略。

---

IE11 似乎不是这种情况 - 它不符合规范。

IE11 的解决方法

：设置attributeFilter 也设置attributes: true。