Alert when iframe url changed

Question

This script runs every 2 seconds and detect if the url of the iframe is changed. But I can't get it to work. I want to alert if the url of the iframe is changed. For example if someone clicks a link and go another page on the iframed content.

var prevSrc = "http://www.bodrumlife.com";
function check() {
var curSrc = $('#iframe').attr('src');
  if (curSrc != prevSrc) {
   alert("hobaa");
   prevSrc = curSrc;
   }
}

window.setInterval(check, 2000); // 2 seconds


<iframe id="iframe" name="iframe" src="http://www.bodrumlife.com"></iframe>

Solution

If you prefer to use JQuery below is the following syntax, instead of using half-jquery and standard javascript.

$(function(){
    $('#iframeId').load(function() {
        alert("the iframe has changed.");
    });
});

Although I'm not sure if the onload function works in Sarafi. It's supported by Firfox, IE and Chrome.

EDIT:

extended example

    <script type="text/javascript">
        $(function () {
            var intialFrameSrc = "http://www.twiij.com";
            $("#iframeContentPanel").load(function () {
                if (intialFrameSrc != $("#iframeContentPanel").attr('src')) {
                    alert("the iframe has changed.");
                }
            });

            $("#btnChangeUrl").click(function () {
                $("#iframeContentPanel").attr("src", "http://m.smh.com.au/");
            });
        });

    </script>
        <iframe id="iframeContentPanel" name="iframeContentPanel" src="http://www.twiij.com" width="500"  frameborder="0" height="500" scrolling="no"></iframe>
<input type="button" id="btnChangeUrl" value="Change Url"/>

Comments

[user198989]

Thanks, it works. But it fires when iframe's first load also. How to prevent it from firing at first load ?

[Nickz]

Create a bool var on first load set false, if loadedCheck is false, then set to true and wrap your alert if loadedCheck. Or if you have default URL then check if url is default then do nothing.

[user198989]

Thanks. Also, is it possible to make an event when iframe is loading (not when loaded) ?

[mgamer]

There's one problem with this script. If you navigate to an invalid URL in Firefox or Safari the load event won't be triggered.