jquery - iframe 文档上的按键将整个 html 作为目标(不是确切的节点)

Question

我有一个带有 designMode="on"的 iframe (是的 - 我知道这是坏事)

我应该捕捉到点击它并按下按键并回显目标元素的节点名称。

$(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);
});

当我点击单词“Hello”时 - 我得到“div” - 这是正确的，但是当我按下它时 - 我得到“html”而不是“div”。如何解决这个问题？

http://jsfiddle.net/fJLTG/

Answer 1

我创建了一个函数，它可以工作按键。

    var reportDomPath = function (e) {
        // 1. get caret cursor position node
        var selection, range, node, i_node;
        var tag = null;

        var iframe = document.getElementById('editor');
        var iframe_win = iframe.contentWindow || iframe.contentDocument;
        e = e || fwin.event;
        if (iframe_win.getSelection) {
            try {   // FF
                selection = iframe_win.getSelection();
                range = selection.getRangeAt(0);
                node = range.commonAncestorContainer;
            } catch (e) {
                return false;
            }
        } else {
            try {   // IE
                selection = iframe_win.document.selection;
                range = selection.createRange();
                node = range.parentElement();
            } catch (e) {
                return false;
            }
        }

        //2. parse DOM Path until HTML. The top of the "HTML" is "Document"

        i_node = node;
        do {
            if (i_node.nodeType != 1)
                continue;
            // get all of DOM Note
            if (tag == null) {
                tag = i_node.nodeName.toLowerCase();
            } else {
                tag = tag + ">>" + i_node.nodeName.toLowerCase();
            }
            // do_some_thing for each Node : obj.addClass('active'); or obj.removeClass('active'); and so on.
        } while (i_node = i_node.parentNode)

        //do_some_thing for all of note fwin.parent.do_some_thing(ret);

        var keyCode = e.charCode || e.keyCode;

        $("#result").html(
                $("#result").html() + "node dom path: " + tag + '   key' + e.type + ': keyCode: ' + keyCode + '<br>'
           );


    };

    $body.click(reportDomPath);
    $(doc).keypress(reportDomPath);   // only FF

但是 $(doc).keypress(reportDomPath) 仅适用于 FF。