当前位置： 文江博客话题详情

iframe 文档上的按键将整个 html 作为目标（不是确切的节点）

发布于 2024-10-28 02:37:17 字数 889 浏览 6 评论 0原文

我有一个带有 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/

原文

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/

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

殊姿 2024-11-04 02:37:17

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

 var reportDomPath = function (e) {
        // 1.获取插入符光标位置节点
        var 选择、范围、节点、i_node；
        var 标签 = 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。

I created a function, it can work keypress.

    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

But $(doc).keypress(reportDomPath) only works on FF.

回复 原文
但可醉心 2024-11-04 02:37:17

我做了一些谷歌..这可能对你有帮助：

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/Programming/Languages/Scripting/JavaScript/Q_25589672.html）

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)

回复 原文
银河中√捞星星 2024-11-04 02:37:17

您最好避免使用 Javascript 添加这些事件，我一生都无法使用 FF5 的 javascript 触发任何事件。我发现你的 Editor.html 页面应该看起来像这样

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

这有最多的浏览器支持，也是最简单的方法。

You are best to avoid adding these events with Javascript, I could not get any event to fire using javascript with FF5 for the life of me. What I found was that your Editor.html page should look something like this

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

This has the most browser support and is the simplest way of doing it too.

回复 原文
~没有更多了~

关于作者

椒妓

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文