JQuery 检测在 iFrame 正文中所做的更改答案

【问题标题】：JQuery detect changes made within an iFrames bodyJQuery 检测在 iFrame 正文中所做的更改
【发布时间】：2014-09-10 23:53:21
【问题描述】：

基本上，

我有一个所见即所得的编辑器，它在表单中隐藏文本区域，并用contenteditable=true iframe 替换 is。我正在尝试为我创建的自动更新功能检测 iframe 中内容的更改。它目前适用于普通输入字段，例如输入和选择，但是我希望它能够检测 iframe 内的内容何时发生变化。

这是我目前拥有的，但没有任何反应：

$("iframe.cke_wysiwyg_frame").contents().find('body').on("change", function() {
  // execute function for auto update
});

我也尝试过 keyup 和 input，但是当 iframe 中的内容发生变化时没有任何反应。出于测试目的，我正在尝试alert("it works");，但没有任何反应。

有没有办法可以针对可编辑 iframe 中的更改？（注意：iframe 在文档中，它不是外部的）

谢谢

编辑：iframe 结构

【问题讨论】：

你能发一下iframe，里面有什么吗？不看结构就很难回答。
什么时候绑定这个事件？在创建 iframe 之前还是之后？在绑定事件之前，您应该调试并确保$("iframe.cke_wysiwyg_frame").contents().find('body') 找到一个元素
body 没有变化事件，试试keyup
$("iframe.cke_wysiwyg_frame").contents().find('body') 这确实找到了它，因为我的自动更新功能在每 30 秒更新一次它插入数据库时就可以使用它正文的内容，例如：
Hi
将通过自动更新功能插入。但我想要它，这样当我将那个 Hi 改为说 Hi Howe you 时，每次按键都会触发自动更新功能。目前提供的代码没有任何反应，但该功能每 30 秒就会执行一次。
keyup 也不做任何事情

【解决方案1】：

原来我使用的 WYSIWYG 编辑器是问题所在，您可以使用以下插件从 CKEditor 获取实例：

【讨论】：