Jquery在iframe中检测body标签上的更改或keyup

我的页面上有一个jwysiwyg内容编辑器控件。 该控件的工作原理是在iframe中创建自己的iframe，其中包含完整的html页面代码。

我希望检测是否有change或keyup以便我可以使用“指示记录需要保存”代码。 我们有输入框，这项工作很好，只是这个第三方编辑器控件给我们带来了问题。

以下是页面源的外观：

 
 
    I just typed this now!  
   

看到body标签包含实时更改。

有了这些SO问题……

jQuery’if .change（）或.keyup（）’

https://stackoverflow.com/a/1639342/511438

我在文档中尝试了以下内容。准备：

 $('iframe').contents().find('body.wysiwyg').live('change', function (e) { alert('testing'); }); $('iframe').contents().find('body.wysiwyg').live('keyup', function (e) { alert('testing'); }); $('iframe > *').bind('keyup', function (e) { alert('testing'); }); 

希望这个版画屏幕有用。 LARGER

Answer 1

你似乎走在了正确的轨道上。

我想知道这是否适合你：

 $('elementSelector', $('iframeSelector').contents()).on('keyup', function(e) { alert('testing'); }); 

所以在你的情况下，我想：

 $('body.wysiwyg', $('iframe#f_Body-wysiwyg-iframe').contents()).on('keyup', function(e) { alert('testing'); }); 

尽管使用此答案中的代码取决于使用jQuery的1.7或更高版本 。

如果您使用的是较旧版本的jQuery，则可以使用自1.7版本起已弃用的live ，或者可能是委托。 我不太确定。 你最好的选择可能是使用最新版本的jQuery与.on（）和.off（）。

Answer 2

我不确定你是否有权编辑iframe的内部内容，但我遇到了类似的问题，这对我有用：

在iframe体内：

 $(document).ready(function(){ $("body").live('keyup', function(){ window.top.window.iChanged(); }) }); 

在父html页面的内容中：

 function iChanged(){ alert("I changed"); } 

Answer 3

我有一个不使用Jquery的答案。 如果像我这样的人在寻找这个，我认为这会有所帮助

 document.getElementById("iframe_id").contentWindow.document.body.onkeyup=function(event) { console.log(event.target.innerHTML); }; 

这就是我做到的。 希望这有助于某人。

您还可以看到 – 向iframe添加事件处理程序以在keyup上调用