window.onbeforeunload, but for a frame?

Lasse V. Karlsen picture Lasse V. Karlsen · Nov 8, 2010 · Viewed 8.9k times · Source

I'm trying to put up a warning message about leaving a webpage, but it is nested inside a frameset.

Apparently window.onbeforeunload triggers if I load the webpage as the root page in the browser, but doesn't trigger when loaded inside the frameset.

Edit: It doesn't work in Chrome 7 or Safari 5, but it works in Internet Explorer 8 and FireFox 3.6. Is there a fix/workaround so that I can get it working in Chrome 7 and/or Safari 5 as well?

What am I doing wrong?

This is what I tried:

function closePageWarning()
{
    return "Are you sure you want to leave this page?"
}

window.onbeforeunload = closePageWarning

Test documents:

test1.html (page with unbeforeunload script)

<html>
    <body>
        <script language="javascript">
        function closePageWarning()
        {
            return "Are you sure you want to leave this page?";
        }

        window.onbeforeunload = closePageWarning;
        </script>
        <a href="http://www.bitbucket.org">bitbucket</a>
    </body>
</html>

test2.html (frameset)

<html>
    <frameset cols="20%, 80%">
        <frame name="menu" src="test3.html" />
        <frame name="content" src="test1.html" />
    </frameset>
</html>

test3.html (menu, trigger change of frame with script)

<html>
    <body>
        <a target="content" href="http://www.bitbucket.org">bitbucket</a>
    </body>
</html>

How to test:

  • Load up test1.html in your browser, and click the link, notice you get the question
  • Load up test2.html in your browser, click either link, notice you get no question

Tested in:

  • Google Chrome 7.0.517.44 - doesn't work
  • Internet Explorer 8.0.7600.16385 - works
  • Safari 5.0.2 - doesn't work
  • FireFox 3.6.12 - works

Answer

Eric Mickelsen picture Eric Mickelsen · Nov 8, 2010

In the context of a frame, window refers to the frame, which is a kind of window. So window.onbeforeunload refers to an event of the window in the frame, which is not fired when the root page is unloaded. You can refer to the root window by window.top, or to the direct parent window of the frame by window.parent. However, these are not standard properties, so use them at your own peril!