Question

I’m trying to build a “JS Confirm Below leaving the page function”

The issue I’m having is that on the page I need this confirmation func I’m using CKEDITOR which creates an iframe for the text editor.

// Javascript code that controls the onbeforeunload event
function setConfirmUnload(on) {
    window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
    return 'You have entered new data on this page.  If you navigate away from this page without first saving your data, the changes will be lost.';
}
// JQuery code to the page with the form that we would like to control:
$(document).ready(function() {
    $(':input',document.newnote).bind("change", function() { setConfirmUnload(true); }); // Prevent accidental navigation away
});

How a can I BIND the iframe, so the script will catch changes in the iframe?

Here is the iFrame CKEDITOR creates:

<span lang="en" tabindex="0" title=" " dir="ltr" class="cke_skin_kama" onmousedown="return false;" id="cke_meeting_notes"><span class="cke_browser_gecko"><span class="cke_wrapper cke_ltr"><table cellspacing="0" cellpadding="0" border="0" style="width: 100%;" class="cke_editor"><tbody><tr style="-moz-user-select: none;"><td class="cke_top" id="cke_top_meeting_notes"><div class="cke_toolbox"><span class="cke_toolbar" id="cke_3"><span class="cke_toolbar_start"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(3, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(0, event);" onkeydown="return CKEDITOR.ui.button._.keydown(0, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Bold" href="javascript:void('Bold')" class="cke_off cke_button_bold" id="cke_4"><span class="cke_icon"/><span class="cke_label">Bold</span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(4, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(1, event);" onkeydown="return CKEDITOR.ui.button._.keydown(1, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Italic" href="javascript:void('Italic')" class="cke_off cke_button_italic" id="cke_5"><span class="cke_icon"/><span class="cke_label">Italic</span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(5, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(2, event);" onkeydown="return CKEDITOR.ui.button._.keydown(2, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Underline" href="javascript:void('Underline')" class="cke_off cke_button_underline" id="cke_6"><span class="cke_icon"/><span class="cke_label">Underline</span></a></span></span><span class="cke_separator"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(6, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(3, event);" onkeydown="return CKEDITOR.ui.button._.keydown(3, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Insert/Remove Numbered List" href="javascript:void('Insert/Remove Numbered List')" class="cke_off cke_button_numberedlist" id="cke_7"><span class="cke_icon"/><span class="cke_label">Insert/Remove Numbered List</span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(7, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(4, event);" onkeydown="return CKEDITOR.ui.button._.keydown(4, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Insert/Remove Bulleted List" href="javascript:void('Insert/Remove Bulleted List')" class="cke_off cke_button_bulletedlist" id="cke_8"><span class="cke_icon"/><span class="cke_label">Insert/Remove Bulleted List</span></a></span></span><span class="cke_separator"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(8, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(5, event);" onkeydown="return CKEDITOR.ui.button._.keydown(5, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Link" href="javascript:void('Link')" class="cke_off cke_button_link" id="cke_9"><span class="cke_icon"/><span class="cke_label">Link</span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(9, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(6, event);" onkeydown="return CKEDITOR.ui.button._.keydown(6, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Unlink" href="javascript:void('Unlink')" class="cke_button_unlink cke_disabled" id="cke_10"><span class="cke_icon"/><span class="cke_label">Unlink<span class="cke_accessibility">, unavailable</span></span></a></span></span><span class="cke_toolbar_end"/></span><span class="cke_toolbar" id="cke_11"><span class="cke_toolbar_start"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(10, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(7, event);" onkeydown="return CKEDITOR.ui.button._.keydown(7, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Cut" href="javascript:void('Cut')" class="cke_off cke_button_cut" id="cke_12"><span class="cke_icon"/><span class="cke_label">Cut</span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(11, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(8, event);" onkeydown="return CKEDITOR.ui.button._.keydown(8, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Copy" href="javascript:void('Copy')" class="cke_off cke_button_copy" id="cke_13"><span class="cke_icon"/><span class="cke_label">Copy</span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(12, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(9, event);" onkeydown="return CKEDITOR.ui.button._.keydown(9, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Paste" href="javascript:void('Paste')" class="cke_off cke_button_paste" id="cke_14"><span class="cke_icon"/><span class="cke_label">Paste</span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(13, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(10, event);" onkeydown="return CKEDITOR.ui.button._.keydown(10, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Paste as plain text" href="javascript:void('Paste as plain text')" class="cke_off cke_button_pastetext" id="cke_15"><span class="cke_icon"/><span class="cke_label">Paste as plain text</span></a></span></span><span class="cke_toolbar_end"/></span><span class="cke_toolbar" id="cke_16"><span class="cke_toolbar_start"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(14, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(11, event);" onkeydown="return CKEDITOR.ui.button._.keydown(11, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Undo" href="javascript:void('Undo')" class="cke_button_undo cke_disabled" id="cke_17"><span class="cke_icon"/><span class="cke_label">Undo<span class="cke_accessibility">, unavailable</span></span></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(15, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(12, event);" onkeydown="return CKEDITOR.ui.button._.keydown(12, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Redo" href="javascript:void('Redo')" class="cke_button_redo cke_disabled" id="cke_18"><span class="cke_icon"/><span class="cke_label">Redo<span class="cke_accessibility">, unavailable</span></span></a></span></span><span class="cke_separator"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(16, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(13, event);" onkeydown="return CKEDITOR.ui.button._.keydown(13, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Remove Format" href="javascript:void('Remove Format')" class="cke_off cke_button_removeFormat" id="cke_19"><span class="cke_icon"/><span class="cke_label">Remove Format</span></a></span></span><span class="cke_toolbar_end"/></span><span class="cke_toolbar"` id="cke_20"><span class="cke_toolbar_start"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(17, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(14, event);" onkeydown="return CKEDITOR.ui.button._.keydown(14, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Text Color" href="javascript:void('Text Color')" class="cke_off cke_button_textcolor" id="cke_21"><span class="cke_icon"/><span class="cke_label">Text Color</span><span class="cke_buttonarrow"/></a></span><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(18, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(15, event);" onkeydown="return CKEDITOR.ui.button._.keydown(15, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Background Color" href="javascript:void('Background Color')" class="cke_off cke_button_bgcolor" id="cke_22"><span class="cke_icon"/><span class="cke_label">Background Color</span><span class="cke_buttonarrow"/></a></span></span><span class="cke_toolbar_end"/></span><span class="cke_toolbar" id="cke_23"><span class="cke_toolbar_start"/><span class="cke_toolgroup"><span class="cke_button"><a onclick="CKEDITOR.tools.callFunction(19, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(16, event);" onkeydown="return CKEDITOR.ui.button._.keydown(16, event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" hidefocus="true" role="button" tabindex="-1" title="Maximize" href="javascript:void('Maximize')" class="cke_off cke_button_maximize" id="cke_24"><span class="cke_icon"/><span class="cke_label">Maximize</span></a></span></span><span class="cke_toolbar_end"/></span></div><a onclick="CKEDITOR.tools.callFunction(20)" class="cke_toolbox_collapser" id="cke_25"/></td></tr><tr><td style="height: 370px;" class="cke_contents" id="cke_contents_meeting_notes" role="region" title="Rich text editor, meeting_notes"><iframe frameborder="0" tabindex="-1" allowtransparency="true" style="width: 100%; height: 100%;" role="region" title=" "/></td></tr><tr style="-moz-user-select: none;"><td class="cke_bottom" id="cke_bottom_meeting_notes"><div class="cke_path" id="cke_path_meeting_notes"><a onclick="return CKEDITOR._.elementsPath.click('meeting_notes',1);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" onkeydown="return CKEDITOR._.elementsPath.keydown('meeting_notes',1, event);" hidefocus="true" title="body element" tabindex="-1" href="javascript:void('body')" id="cke_elementspath_2_1">body</a><a onclick="return CKEDITOR._.elementsPath.click('meeting_notes',0);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" onkeydown="return CKEDITOR._.elementsPath.keydown('meeting_notes',0, event);" hidefocus="true" title="p element" tabindex="-1" href="javascript:void('p')" id="cke_elementspath_2_0">p</a><span class="cke_empty"> </span></div><div onmousedown="CKEDITOR.tools.callFunction(2, event)" title="Drag to resize" class="cke_resizer"/></td></tr></tbody></table><style>.cke_skin_kama{visibility:hidden;}</style></span></span></span>

Answer 1

Like this:

$(':input', document.newNote.contentWindow.document).change(...);

Assuming that document.newNote is the IFRAME.