iFrame Validation

Question

Hi,

I currently have an iframe within my main page that has a number of checkboxes that need to be actioned prior to leaving the iframe, i.e, if the user commences checking the checkboxes and half way through they then click back on the main page, i.e leaving the iframe, I would like to be able to trap/validate that they have left the iframe and prompt them with a message indicating this, say with a "Note: You will lose all data entered here - Leave: Yes/No?" type message.

Any help/websites would be appreciated.

Thanks. Tony.

Answer 1

Prompting a User to Save When Leaving a Page. This 4guys article sounds like what you need. It talks about the onbeforeunload event. There's some awesome posts here on stackoverflow about onbeforeunload too.

---

It appears that onbeforeunload indeed does not fire for an iframe. Bugger!

Here's some sample code that should work though. This will only work if you're in the same domain, otherwise same origin policy will prevent the iframe from talking back to the parent.

I also haven't tested these in many browsers so YMMV.

You've got two options here, depending on where you want to put the prompt for changes logic.

Option one involves the iframe telling the parent window when there's changes.

Parent window javascript:

    window.onbeforeunload=closeIt;
    var changes = false;
    function closeIt()
    {
      if (changes)
      {
          return "Yo, changes, save 'em?";
      }
    }
    function somethingChanged() {
        changes=true;
    };

Iframe javascript:

    $(function() {
        $('input').change(parent.somethingChanged);
    });

Option two involves the iframe taking control over the parent window's onbeforeunload

Parent window javascript:

There is none :-)

Iframe javascript:

    $(function() {
        parent.window.onbeforeunload = myCloseIt;
        $('input').change(somethingChanged);
    });
    var changes = false;
    function myCloseIt()
    {
      if (changes)
      {
          return "Yo, changes, save 'em?";
      }
    }
    function somethingChanged() {
        changes=true;
    };

In either option the naive changes variable could be beefed up a bit, probably using techniques from the 4guys article, to see if there's really been any changes.

---

If they're on different domains, but you're still in charge of "both sides" of the HTML, there's still some options, they're just harder.

xssinterface is a library that uses postMessage and location hashes and secret voodoo black magic to communicate cross site.