Opened 7 years ago

Closed 6 years ago

#9958 closed Bug (fixed)

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

Reported by: culaido Owned by: Piotr Jasiun
Priority: Normal Milestone: CKEditor 4.2.1
Component: UI : Dialogs Version: 4.0
Keywords: IE Cc:

Description (last modified by Jakub Ś)

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.';
});

Attachments (1)

ckeditor.zip (809.9 KB) - added by culaido 7 years ago.

Download all attachments as: .zip

Change History (19)

comment:1 Changed 7 years ago by Jakub Ś

Status: newpending

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.

Changed 7 years ago by culaido

Attachment: ckeditor.zip added

comment:2 Changed 7 years ago by 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.

comment:3 Changed 7 years ago by Jakub Ś

Keywords: IE added
Status: pendingconfirmed

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.

comment:4 Changed 7 years ago by 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>.

Last edited 7 years ago by ddouble (previous) (diff)

comment:5 Changed 7 years ago by 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','###');
}

comment:6 Changed 7 years ago by 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.

comment:7 Changed 7 years ago by 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.

Last edited 7 years ago by Alistair (previous) (diff)

comment:8 in reply to:  7 Changed 7 years ago by 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!

comment:9 Changed 7 years ago by 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.. :(

Last edited 7 years ago by sanil (previous) (diff)

comment:10 in reply to:  9 Changed 7 years ago by 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.

Last edited 7 years ago by Roy Shoa (previous) (diff)

comment:11 Changed 7 years ago by 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');
    }
  });
});

comment:12 Changed 6 years ago by Jakub Ś

Description: modified (diff)

comment:13 Changed 6 years ago by Jakub Ś

#10484 was marked as duplicate.

comment:14 Changed 6 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 4.2.1

comment:15 Changed 6 years ago by Piotr Jasiun

Owner: set to Piotr Jasiun
Status: confirmedassigned

comment:16 Changed 6 years ago by Piotr Jasiun

Status: assignedreview

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

comment:17 Changed 6 years ago by Olek Nowodziński

Status: reviewreview_passed

Hopefully this fix won't break anything ;)

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

comment:18 Changed 6 years ago by Piotr Jasiun

Resolution: fixed
Status: review_passedclosed
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy