javascript 突变观察者未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20383356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mutation Observer is undefined
提问by knightsbore
I am attempting to fix and issue with my code. I was originally using DOMNodeRemoved and DOMNodeInserted for keeping an eye on an element within a page I am working on. They worked well but did not function in IE. So I started trying to work with a MutationObserver.
我正在尝试修复和发布我的代码。我最初使用 DOMNodeRemoved 和 DOMNodeInserted 来监视我正在处理的页面中的元素。它们运行良好，但在 IE 中不起作用。所以我开始尝试使用 MutationObserver。
Here is my Code it's called on onPageInit(the callback writes to the console but I disabled it since IE no longer supports console):
这是我在 onPageInit 上调用的代码（回调写入控制台，但我禁用了它，因为 IE 不再支持控制台）：
var callback = function(allmutations){
allmutations.map( function(mr){
var mt = 'Mutation type: ' + mr.type; // log the type of mutation
mt += 'Mutation target: ' + mr.target; // log the node affected.
//console.log( mt );
})
}
mo = new MutationObserver(callback),
options = {
// required, and observes additions or deletion of child nodes.
'childList': true,
// observes the addition or deletion of "grandchild" nodes.
'subtree': true
}
alert('its alive');
mo.observe(document.body, options);
It works fine in chrome, however for some reason falls flat in IE. I get a message box during load of the page that says :
它在 chrome 中运行良好，但由于某种原因在 IE 中表现平平。我在页面加载过程中收到一个消息框，上面写着：
An unexpected error occurred in a script running on this page.
onPageInit(pageInit)
scriptname
JS_EXCEPTION
TypeError 'MutationObserver' is undefined
Am I doing something wrong? Additional info: Page is a netsuite page, running jQuery 1.7.2 (if it matters)
难道我做错了什么？附加信息：页面是一个网络套件页面，运行 jQuery 1.7.2（如果重要的话）
回答by naugtur
If you need to detect DOM insertions in IE10+ (and other browsers that don't yet support MutationObserver) You can use a trick based on listening to animationstartevent for CSS animations that animate a property that doesn't affect the way your nodes look.
如果您需要在 IE10+（以及其他尚不支持的浏览器）中检测 DOM 插入，MutationObserver您可以使用基于监听animationstart事件的技巧来为不影响节点外观的属性设置动画的 CSS 动画。
The technique was discovered by Daniel Buchner, you can see it described it this post by David Walsh
该技术是由 Daniel Buchner 发现的，您可以在 David Walsh 的这篇文章中看到它对它的描述
The code required to make it work would be something like this:
使其工作所需的代码如下：
@keyframes animationName{
from { outline: 1px solid transparent }
to { outline: 0px solid transparent }
}
* {
animation-duration: 0.001s;
animation-name: animationName;
}
and
和
document.addEventListener('animationstart', insertionHandler, false);
The setup required for this trick to work cross-browser is quite complicated with all the prefixes and event listener names. The handler will be called for every new node and the choice of the property to animate is hard.
这个技巧跨浏览器工作所需的设置非常复杂，包括所有前缀和事件侦听器名称。将为每个新节点调用处理程序，并且很难选择要设置动画的属性。
That's why I wrapped it in a library to make it easy to use: https://github.com/naugtur/insertionQuery
这就是为什么我将它包装在一个库中以使其易于使用：https: //github.com/naugtur/insertionQuery
Here's a brief usage example:
这是一个简短的使用示例：
insertionQ('selector').every(function(element){
//callback on every new element
});
回答by Kevin B
That method was added in IE11, therefore it won't be available if the browser is running in compatibility mode for anything other than IE11.
该方法是在 IE11 中添加的，因此如果浏览器在兼容模式下运行 IE11 以外的任何东西，它将不可用。
http://msdn.microsoft.com/en-us/library/ie/dn265034(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ie/dn265034(v=vs.85).aspx
