Opened 12 years ago
Closed 11 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 )
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)
Change History (19)
comment:1 Changed 12 years ago by
Status: | new → pending |
---|
Changed 12 years ago by
Attachment: | ckeditor.zip added |
---|
comment:2 Changed 12 years ago by
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 12 years ago by
Keywords: | IE added |
---|---|
Status: | pending → confirmed |
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 12 years ago by
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>.
comment:5 Changed 12 years ago by
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 12 years ago by
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 follow-up: 8 Changed 12 years ago by
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.
comment:8 Changed 12 years ago by
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 follow-up: 10 Changed 12 years ago by
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 a error saying 'preview' is null or not an object.
Need help.. :(
comment:10 Changed 12 years ago by
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.
comment:11 Changed 11 years ago by
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 11 years ago by
Description: | modified (diff) |
---|
comment:14 Changed 11 years ago by
Milestone: | → CKEditor 4.2.1 |
---|
comment:15 Changed 11 years ago by
Owner: | set to Piotr Jasiun |
---|---|
Status: | confirmed → assigned |
comment:16 Changed 11 years ago by
Status: | assigned → review |
---|
I've added onClick="return false;" to UI buttons what fixed problem.
- git:23a15fd
- tests:03ff384
comment:17 Changed 11 years ago by
Status: | review → review_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 11 years ago by
Resolution: | → fixed |
---|---|
Status: | review_passed → closed |
- git:ba119ff
- tests:f390938
Hi,
I have tried using:
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.