Javascript 浏览器加载新内联 (ajax) 内容时触发的事件？

Question

浏览器加载新的内联 (ajax) 内容时是否会触发 Javascript 事件？我想在我的浏览器扩展中捕捉新内容。感谢大家

window.onload = function() {
    var observer = new MutationObserver(function(mutations) {
        alert("hello");
    });

    var config = {
        attributes: true,
        childList: true,
        characterData: true
    };

    observer.observe($('#contentArea'), config);
}

Answer 1

使用 DOM Mutation Observer 很可能就是您想要的。

// Since you are using JQuery, use the document.ready event handler
// which fires as soon as the DOM is fully parsed, which is before
// the load event fires.
$(function() {
    var observer = new MutationObserver(function(mutations) {
        alert("DOM has been mutated!");
    });

    var config = {
        attributes: true,
        childList: true,
        characterData: true
    };

    // You must pass a DOM node to observe, not a JQuery object
    // So here, I'm adding [0] to extract the first Node from 
    // the JQuery wrapped set of nodes.
    observer.observe($('#contentArea')[0], config);
    
    // Then, the DOM has to be mutated in some way:
    $("#contentArea").html("<p>test</p>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentArea"></div>

Javascript 浏览器加载新内联 (ajax) 内容时触发的事件？

Javascript event that is triggered when browser loads new inline (ajax) content?

html

javascript

ajax

events

jquery-events