jquery 监听 iframe 中的事件

发布于 2024-10-19 13:55:01 字数 995 浏览 5 评论 0原文

我正在使用 jquery 制作一个非常简单的富文本编辑器...我不想使用第三方的。

我需要从输入开始监听 iframe（同一域等）内的事件。显然我需要经常使用bind()。

这就是我目前所拥有的，它在 IE8 中运行良好（足够令人惊讶），但在 Chrome 中却不行。

<script>
$(function() {
    $('#text').contents().bind("keyup keydown keypress", function(e) {
        var code = e.keyCode || e.which;
        alert(code);
        return false;
    });
});
</script>

<body>
    <iframe id="text" name="text" src="edit.html"></iframe>
</body>

在上面的按键事件中，我还想获取“edit.html”的当前值并用该值更新文本区域...

任何帮助将不胜感激:)

非常感谢

编辑：进一步解释，编辑。 html 是一个可编辑的文件，使用 "document.body.contentEditable = true;"

编辑 2:

edit.html =

<script language="javascript">
    function InitializeIFrame() {
        document.body.contentEditable = true;                         
    } 

</script>
<html>
<body onload="InitializeIFrame();">

</body>
</html>

原文

I'm making a very simple Rich Text Editor using jquery... I don't want to use a third-party one.

I need to listen for events within an iframe (same domain etc), starting with typing. Apparently I'll need to use bind() a lot.

This is what I've got at the moment which works fine in IE8 (amazingly enough) but not Chrome.

<script>
$(function() {
    $('#text').contents().bind("keyup keydown keypress", function(e) {
        var code = e.keyCode || e.which;
        alert(code);
        return false;
    });
});
</script>

<body>
    <iframe id="text" name="text" src="edit.html"></iframe>
</body>

On the key press event above, I will also want to get the current value of 'edit.html' and update a textarea with that value...

Any help would be MUCH appreciated :)

Many thanks

EDIT: to explain further, edit.html is an editable file using "document.body.contentEditable = true;"

EDIT 2:

edit.html =

<script language="javascript">
    function InitializeIFrame() {
        document.body.contentEditable = true;                         
    } 

</script>
<html>
<body onload="InitializeIFrame();">

</body>
</html>

分享到QQ

分享到微博

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

发布评论

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

情独悲 2024-10-26 13:55:01

我似乎记得当我尝试与 iframe（同一域等）通信时遇到了问题。我发现的技巧是在框架内进行绑定并绑定到主窗口中的函数。像这样的东西（在edit.html中）：

<script>
$('body').bind("keyup keydown keypress", function(e) {
  window.parent && window.parent.funcKey && window.parent.funcKey(e);
});
</script>

然后在主页中像这样的东西：

<script>
function funcKey(e) {
  var code = e.keyCode || e.which;
  alert(code);
  return false;
}
</script>

我意识到这并不完全符合您尝试执行的方式，但达到了相同的效果。根据我对 javascript 和 iframe 的理解，实际上，与家长沟通比与 iframe 沟通更容易。如果您确实需要双向通信，您可以（继续上面的示例）使用函数 funcKey() 的返回值将数据传递回 iframe。

I seem to recall running into a problem when I was trying to communicate with an iframe (same domain etc). The trick I found is to do the binding inside the frame and bind to functions in the main window. Something like this (in edit.html):

<script>
$('body').bind("keyup keydown keypress", function(e) {
  window.parent && window.parent.funcKey && window.parent.funcKey(e);
});
</script>

and then in the main page something like:

<script>
function funcKey(e) {
  var code = e.keyCode || e.which;
  alert(code);
  return false;
}
</script>

I realise this does not exactly fit into the way you were trying to do it, but the same effect is achieved. From what I understand of javascript and iframes, in practice it's easier to communicate with a parent than it is to communicate with an iframe. If you really need two-way communication you could (going on the example above) use the return value of the function funcKey() to pass data back into the iframe.

回复收藏 0 原文