jquery 监听 iframe 中的事件答案

【问题标题】：jquery listen for events in an iframejquery 监听 iframe 中的事件
【发布时间】：2011-07-03 14:24:30
【问题描述】：

我正在使用 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' 的当前值并使用该值更新文本区域...

任何帮助将不胜感激:)

非常感谢

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

编辑 2：

edit.html =

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

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

</body>
</html>

【问题讨论】：

拜托，请使用萤火虫来调试你的代码，警报被耶稣使用了:) current value 你的意思是src 值，如果是这样的话，@ 987654327@返回edit.html
@Val - alert 仍然提醒数据 - 我不时使用它，因为我不能被打扰输入console.log(whatever);。此外，我确定这只是暂时的？
好的，var log = function (str){ console.log(str) } 只放一次 :) 然后将其用作log(watever)
alert 仍然有效并且可以快速输入...我想获取 edit.html 文件的“内容”，而不是 iframe 的 attr(src)。
api.jquery.com/contents 它解释了它并在我的 chrome 上工作，我认为你将 keyup 绑定在错误的位置，尝试$('#text').contents().find('body,html').bind.... 并让我知道这是否有效，顺便说一句 body，html 是对于跨浏览器:)

标签： jquery iframe rte

【解决方案1】：

我似乎记得在尝试与 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。

【讨论】：

@Tim - 还要确保在加载 iframe 之前浏览器已读取父级中的函数声明，否则您将在页面上出现 JS 错误并且它将无法工作。

【解决方案2】：

关于 javascript 最烦人的事情之一是 document.frames["frameID"] 返回一个与 document.getElementById("frameID") 不同的对象。（这是你使用 $("#frameID") 时得到的）

这种区别可能是您遇到跨浏览器问题的原因。您可能需要使用不同的方式来访问 iframe 内容，直到找到一种可以正常工作的方式。

【讨论】：