Press ok button will trigger onbeforeunload event in popup-dialog on ie9

[culaido]

In my code,

I set a listener for beforeunload event to prevent user close browser once they do the modification on the form.

ex:

//jQuery 1.9.0
$(window).bind('beforeunload', function(e){
   // do some check ....
   return 'beforeunload';
});	

But IE9 fires beforeunload event while user press ok button in popup-dialog (link, image ...etc), so, it causes the error flow in my code.

Is anyway to avoid it?

---

Edit:
Native way to reproduce:

window.onbeforeunload = function(){
	return 'beforeunload';
};	

Below causes onbeforeunload only in IE9 and IE10 (mentioned in #10484):

window.attachEvent('onbeforeunload', function() {
	return 'You will lose your content.';
});

[Jakub Ś]

Hi,

I have tried using:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
CKEDITOR.replace( 'editor1' );
			
$(window).bind('beforeunload', function(e){
	// do some check ....
	console.log('beforeunload');
});

but this simply works. There were no beforeunload events caught.

If this does work with such simple TC this makes me think that you may have made mistake somewhere in your implementation.

1. Could you double check and leave comment?
2. If problem persists could you attach reduced HTML page that shows this problem? I'm talking about working page that can be put e.g. in samples folder and will show the problem.

[culaido]

There is a post with the same problem.

​http://ckeditor.com/forums/CKEditor/onbeforeunload-fires-all-the-time

I upgrade the jQuery to v1.8.3 but still no changes.

I use Nightly Build code (released at 8 Jan 2013) to test it. ​http://dev.ckeditor.com/attachment/ticket/9958/ckeditor.zip

There is a problem.html in the root directory.

While pressing ok button in dialog. It still fires onbeforeunload event, and cause alert with beforeunload text.

My IE version is 9.0.8112.16421.

Thank you.

[Jakub Ś]

Thank you for the code.

Problem can be reproduced from CKEditor 4.0 (doesn't occur in 4 beta or 3.x) in IE7-10.

[ddouble]

This problem is due to button tag is <a>, if change button tag to <button>，the problem will be gone.

IE will trigger beforeunload event when click any <a>.

[ddouble]

add a dialogShow event handle to fix this problem

<a href="###" ... /> will not trigger onbeforeload event in IE

dialogShow:function(e) {
  var dlg = e.data;
  var dlgJQ = $(dlg.getElement().getFirst().$);
  dlgJQ.find('a.cke_dialog_ui_button').attr('href','###');
}

[Joel]

I just tested this on my system. The issue is as described in ​http://stackoverflow.com/a/2508151/694325 - when a link href is not "#" but "javascript:void(0)" or something like that IE fires the event.

I did a quick and dirty workaround by crudely replacing the most obvious ones from ckeditor.js worked for me. I might have broken something though, haven't tested thoroughly yet. Sometimes the void(n) has a value or something in it though, I have no clue what do do then.

[Alistair]

Started working with CKEditor a couple of days ago and already came across this annoying onBeforeUnload triggering in IE. After a bit of fiddling I found the following should work perfectly from your main page script block.

It's a variation on ddouble's approach above, but doesn't require modifying CKEditor. Also it addresses links by behaviour (ie. ones that use "javascript:void(0)"), rather than by the class name "cke_dialog_ui_button", which could change or not cover all affected links.

CKEDITOR.on('instanceCreated', function(event) {
  var editor = event.editor;
  editor.on('dialogShow', function(dialogShowEvent) {

    // When a dialog shows, get its base element and search
    // for all links with "void(0)" in the href, then replace
    // the href with "###". This prevents IE from triggering
    // onBeforeUnload, and "###" (instead of "#") stops browser
    // jumping to top of document when the link is clicked.

    $(dialogShowEvent.data._.element.$)
    .find('a[href*="void(0)"]').attr('href','###');

    /* OR.. modification to the above line if you prefer not to have
       "###" appended to your browser's URL (personal gripe of mine):

    $(dialogShowEvent.data._.element.$)
    .find('a[href*="void(0)"]:not([onclick])')
    .attr('href','###').attr("onclick","return false;");
    
    */
  });
});

Hope that helps.

[Roy Shoa]

Replying to waveform:

Your code was not working for me. Even after it added the ### to the href IE9 still fire the "beforeunload" so i change your code a little and it fix the problem:

if($.browser.msie){
    event.editor.on('dialogShow', function(dialogShowEvent){
        $(dialogShowEvent.data._.element.$).find('a[href*="void(0)"]').removeAttr('href');
    });
}

Thanks!

[sanil]

Even i faced this issue, and tried the below fix given by royshoa on IE 8

if($.browser.msie){

event.editor.on('dialogShow', function(dialogShowEvent){

$(dialogShowEvent.data._.element.$).find('a[href*="void(0)"]').removeAttr('href');

});

}

But gets an error saying 'preview' is null or not an object.

Need help.. :(

[Roy Shoa]

Replying to saniln:

This is the full code:

CKEDITOR.on('instanceCreated', function(event) {
	event.editor.on('dialogShow', function(dialogShowEvent) {
		if($.browser.msie){
			$(dialogShowEvent.data._.element.$).find('a[href*="void(0)"]').removeAttr('href');
		}
	});
});

Its working grate for me. Note! I am using jQuery on the page so i can use "$.browser.msie". If you are not using jQuert replace this if condition to something else or remove it.

[Steve Calvert]

This worked for me:

CKEDITOR.on('instanceReady', function(event) {
  event.editor.on('dialogShow', function(dialogShowEvent) {
    if(CKEDITOR.env.ie) {
      $(dialogShowEvent.data._.element.$).find('a[href*="void(0)"]').removeAttr('href');
    }
  });
});

[Jakub Ś]

#10484 was marked as duplicate.

[Piotr Jasiun]

I've added onClick="return false;" to UI buttons what fixed problem.

• ​git:23a15fd
• tests:03ff384

[Olek Nowodziński]

Hopefully this fix won't break anything ;)

• Rebased both branches on latest master.
• Pushed small fixes to each of the branches.

[Piotr Jasiun]

• ​git:ba119ff
• tests:f390938