Checking if form is "dirty" in iframe

My team is developing an Atlassian Connect app for Jira. Our iframe is loaded to an admin page (by using adminPages module).
The iframe contains a form with some input fields (filled with default values) with a “Save” and “Close” button. I’d like to know if it’s possible to check if the form is “dirty” (any changes were made) and show a confirmation popup when any of these events happen:

  • refresh button of the browser is clicked (or F5 is pushed)
  • “back” (previous page) button of the browser is clicked
  • custom “Close” button is clicked
  • any Jira navigation menu item is clicked
  • tab is closed
  • another URL is entered in the address bar

Essentially any event that could lead to loss of data entered in the form.

Currently I’m using a similar code in the iframe, but it does not cover all the above cases (as the referenced window object is the iframe itself):

$(window).bind('beforeunload', function(){
	return '';

Do you have any suggestions?

We use code that looks like this:

    window.addEventListener('beforeunload', (e) => {
        if (unsavedChanges()) {
            const dialogText = 'Changes that you made may not be saved.';
            e.returnValue = dialogText;
            return dialogText;

Not sure if it catches ALL of your events but it does for most of them.

1 Like