нажатие клавиши на документе iframe получает целиком html (не точный узел) - PullRequest
Новая
       21

нажатие клавиши на документе iframe получает целиком html (не точный узел)

1 голос
/ 28 марта 2011

У меня есть iframe с designMode = "on" (Да - я знаю, что это плохо)

Я должен поймать нажатие на него и нажатие клавиш и выводить имя узла цели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);
});

Когда я нажимаю на слово «Hello» - я получаю «div» - это правильно, но когда я нажимаю на него - я получаю «html» вместо «div».Как это исправить?

http://jsfiddle.net/fJLTG/

Ответы [ 3 ]

3 голосов
/ 19 июля 2011

Я создал функцию, она может работать при нажатии клавиш. 

    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.

1 голос
/ 28 марта 2011

Я немного погуглил ... это может вам помочь: 

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

все кредиты для jetcook (http://www.experts -exchange.com / Программирование / Языки / Сценарии / JavaScript / Q_25589672.html)

0 голосов
/ 13 августа 2011

Лучше всего избегать добавления этих событий с Javascript, я не мог получить ни одно событие для запуска, используя javascript с FF5 на всю жизнь. Я обнаружил, что ваша страница Editor.html должна выглядеть примерно так 

<html>
<head><title>My editor</title></head>
<body contenteditable="true" onkeydown="return KeyDown_event(event)">
Edit me...
</body>
</html>

Это имеет наибольшую поддержку браузера и является самым простым способом сделать это.

...