How to trigger a function when iframe src change?

Question

i have iframe with src like http://remote-domain.com/ , and when ever the src is get changed i need to trigger a function like iframeSrcChanged()

<iframe id="iframe" src="http://remote-domain.com/" frameborder="0" width="100%" height="100%" ></iframe>

and when user click about-us inside iframe, the iframe src get changed into

<iframe id="iframe" src="http://remote-domain.com/about-us.html" frameborder="0" width="100%" height="100%" ></iframe>

so this time i need to trigger iframeSrcChanged() function.

Please help me to trigger out this issue.

Answer 1

var iframe = document.getElementById("iframe");

iframe.addEventListener("DOMAttrModified", function(event) {
    if (event.attrName == "src") {
       // The "src" attribute changed
    }
});

However this will work only in modern browsers