उत्परिवर्तन पर्यवेक्षक अपरिभाषित है

मैं अपने कोड को ठीक करने और जारी करने का प्रयास कर रहा हूं। मैं मूल रूप से उस पृष्ठ के भीतर किसी तत्व पर नजर रखने के लिए DOMNodeRemoved और DOMNodeInserted का उपयोग कर रहा था जिस पर मैं काम कर रहा हूं। उन्होंने अच्छी तरह से काम किया लेकिन आईई में काम नहीं किया। तो मैंने एक उत्परिवर्तन ऑब्सर्वर के साथ काम करने की कोशिश करना शुरू कर दिया।

यहां मेरा कोड है जिसे इसे ऑनेज पर कॉल किया गया है (कॉलबैक कंसोल पर लिखता है लेकिन मैंने इसे अक्षम कर दिया क्योंकि आईई अब कंसोल का समर्थन नहीं करता है):

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);

यह क्रोम में ठीक काम करता है, हालांकि किसी कारण से आईई में फ्लैट आता है। मुझे पृष्ठ के लोड के दौरान एक संदेश बॉक्स मिलता है जो कहता है:

An unexpected error occurred in a script running on this page.
onPageInit(pageInit)
scriptname

JS_EXCEPTION
TypeError 'MutationObserver' is undefined

क्या मुझसे कुछ गलत हो रही है? अतिरिक्त जानकारी: पृष्ठ एक नेटस्वाइट पेज है, जो jQuery 1.7.2 चला रहा है (यदि यह मायने रखता है)

5
पृष्ठ आईई-9 संगतता मोड में स्वचालित रूप से चलता है क्योंकि नेटस्वाइट सेट करता है, जो स्पष्ट रूप से क्यों है कि मैं कभी भी console.log() का उपयोग नहीं कर सकता ...
जोड़ा लेखक knightsbore, स्रोत
वास्तव में इसे एक जवाब में फेंक दें और बीमार इसे समाधान के रूप में चिह्नित करें, मुझे उस चीज़ पर सूचित करने के लिए धन्यवाद जिसने मुझे बहुत निराशा की है।
जोड़ा लेखक knightsbore, स्रोत
क्या आप सुनिश्चित हैं कि ब्राउज़र IE11 मानकों मोड में चल रहा है?
जोड़ा लेखक Kevin B, स्रोत
"चूंकि आईई अब कंसोल का समर्थन नहीं करता है" कब से? (F12 दबाएं और console.log काम करेगा)
जोड़ा लेखक Kevin B, स्रोत
यह समझाएगा कि आईई 11 में जोड़ा गया तरीका आपके लिए उपलब्ध क्यों नहीं है।
जोड़ा लेखक Kevin B, स्रोत

2 उत्तर

यदि आपको IE10 + (और अन्य ब्राउज़र जो अभी तक MutationObserver का समर्थन नहीं करते हैं) में DOM प्रविष्टियों का पता लगाने की आवश्यकता है, तो आप सीएसएस एनिमेशन के लिए एनीमेशन प्रारंभ ईवेंट सुनने के आधार पर एक चाल का उपयोग कर सकते हैं। ऐसी संपत्ति को एनिमेट करें जो आपके नोड्स के तरीके को प्रभावित न करे।

The technique was discovered by Daniel Buchner, you can see it described it this post by David Walsh

इसे काम करने के लिए आवश्यक कोड कुछ ऐसा होगा:

@keyframes animationName{ 
    from { outline: 1px solid transparent } 
    to { outline: 0px solid transparent } 
}
* { 
    animation-duration: 0.001s; 
    animation-name: animationName;
}

तथा

document.addEventListener('animationstart', insertionHतथाler, false);

The setup required for this trick to work cross-browser is quite complicated with all the prefixes तथा event listener names. The hतथाler will be called for every new node तथा 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

यहां एक संक्षिप्त उपयोग उदाहरण दिया गया है:

insertionQ('selector').every(function(element){
    //callback on every new element
});
18
जोड़ा

यह विधि IE11 में जोड़ा गया था, इसलिए यह उपलब्ध नहीं होगा यदि ब्राउज़र IE11 के अलावा किसी अन्य चीज़ के लिए संगतता मोड में चल रहा है।

http://msdn.microsoft.com/en-us/library /ie/dn265034(v=vs.85).aspx

9
जोड़ा
एक टिप्पणी के रूप में, नेटस्वाइट स्वचालित रूप से यानी 9 संगतता मोड में चलता है जो कि समस्या का कारण बन रहा था।
जोड़ा लेखक knightsbore, स्रोत