Is there a Javascript event that is triggered when browser loads new inline (ajax) content? I would like to catch new content as it happens inside my browser extension. Thanks to all
JavaScript
x
14
14
1
window.onload = function() {
2
var observer = new MutationObserver(function(mutations) {
3
alert("hello");
4
});
5
6
var config = {
7
attributes: true,
8
childList: true,
9
characterData: true
10
};
11
12
observer.observe($('#contentArea'), config);
13
}
14
Advertisement
Answer
Using the DOM Mutation Observer will most likely be what you want.
JavaScript
1
22
22
1
// Since you are using JQuery, use the document.ready event handler
2
// which fires as soon as the DOM is fully parsed, which is before
3
// the load event fires.
4
$(function() {
5
var observer = new MutationObserver(function(mutations) {
6
alert("DOM has been mutated!");
7
});
8
9
var config = {
10
attributes: true,
11
childList: true,
12
characterData: true
13
};
14
15
// You must pass a DOM node to observe, not a JQuery object
16
// So here, I'm adding [0] to extract the first Node from
17
// the JQuery wrapped set of nodes.
18
observer.observe($('#contentArea')[0], config);
19
20
// Then, the DOM has to be mutated in some way:
21
$("#contentArea").html("<p>test</p>");
22
});
JavaScript
1
2
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<div id="contentArea"></div>