CODEWITHSUNDEEP
javascriptgoogle-chromeiframe
steps
steps

Reputation: 804

How to disable default browser message “are you sure you want to leave this page” for a Google Form iframe?

I have an iframe hidden via a Bootstrap modal which contains a Google Form URL. 

<div class="modal fade" id="sugestaoPL" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title">My Modal Title</h4>
           </div>
           <div class="modal-body">
              <iframe src="<?php echo ot_get_option('iframe_url'); ?>"></iframe>
           </div>
           <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Everytime I try to leave or reload a page, the browser advices me that default "Are you sure you want to leave this page, unsaved changes will be lost" message, probably because I'm leaving the page with the Google Form untouched.

Since in most use cases my user won't let the modal visible and therefore will not use the Google Form, I'd like to disable this default message. I know the message is coming from the Google Form because if I remove the modal piece of code, the browser message goes away.

The solutions for removing this default behavior I found were about adding a

window.onbeforeunload = null

in my code. Which I did. I tried that inside $(document).ready(){}, and outside it, in the head and in the footer right before closing the </body> tag, and none of the alternatives prevented this dialogue to appear.

I'm afraid that's because it's inside of an iframe.

How do I eliminate this default dialogue?

Upvotes: 1

Views: 3613

Answers (3)

steps
steps

Reputation: 804

Unfortunatelly I wasn't able to fix the main issue, but I found a workaround. As pointed out here, this seems like a Google issue with its forms. However the workaround pointed in the link didn't work for me.

This is the workaround that did work 

jQuery(window).bind('beforeunload', function(){
    if(jQuery('.modal').is(':visible') === false){
        jQuery( ".modal" ).remove();
    }
});

What it does is, if there is no modal open when I'm trying to leave the page, then remove the .modal element from the page right before the page is onloaded. This way the iframe is removed as well and the "Are you sure to leave this page" is gone.

Upvotes: 1

samnu pel
samnu pel

Reputation: 914

if you set window.onbeforeunload = someFunction; you can nullify it with window.onbeforeunload = null.

However, if you set window.addEventListener('beforeunload',someFunction);, this event listener can't be removed with window.onbeforeunload = null. It can be removed only with removeEventListener('beforeunload',someFunction);

Upvotes: 0

Basil Battikhi
Basil Battikhi

Reputation: 2668

   location.href = "javascript:(" + function() {
   window.onbeforeunload = null;
   window.onunload = null;
  } + ")()";

take a look at this thread reference

Upvotes: 1

Related Questions