Question

I have an iframe with designMode=”on” (Yeah – I know this is bad thing)

I should catch clicking on it and keypressing and echo the node name of target element.

$(function() {

var editor = $("#editor")[0].contentWindow;
var doc = editor.document;
editor.document.designMode = "on";
doc.open();
doc.write('<div id="dummy">test</div>');
doc.close();
// find iframe body
var $body = $("#editor").contents().find('#dummy').parent();
// clean after finding
$body.html('<div>Hello</div>');

var report = function(e) {
    $("#result").html(
    $("#result").html() + " " + e.target.nodeName.toLowerCase());
};

$body.click(report);

// $body.keypress(report) -> doesn't work
// only $(doc).keypress works:
$(doc).keypress(report);
});

When I click on word “Hello” – I get “div” – it’s correct, but when I keypress on it – i get “html” instead “div”. How to fix this?

http://jsfiddle.net/fJLTG/

Answer 1

I did a bit of google .. this might help you:

var f = document.getElementById('iframe_id');
var fwin = f.contentWindow || f.contentDocument;
fwin.document.designMode = 'on';

var evt_key = function (e) {
    e = e || fwin.event;
    var range = null, ret = null;

    if (fwin.document.selection) {
        range = fwin.document.selection.createRange();
        ret = range.parentElement();
    }
    else if (fwin.window.getSelection) {
        var range = fwin.window.getSelection().getRangeAt(0);
        ret = range.commonAncestorContainer.parentNode || fwin.document;
    }

    fwin.parent.do_some_thing(ret);
};

if (fwin.document.attachEvent) {
    fwin.document.attachEvent('onkeypress', evt_key);
}
else if (fwin.document.addEventListener) {
    fwin.document.addEventListener('keypress', evt_key, false);
}

all credis to jetcook (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_25589672.html)