Question

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

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

以下是页面源的内容：

<div id="this_is_our_div_Container">
    <div class="wysiwyg">
        <iframe id="f_Body-wysiwyg-iframe">
            <html>
            <body style="margin: 0;" class="wysiwyg">
                I just typed this now!</body></html>
        </iframe>
    </div>
    <textarea class="wysiwyg" cols="20" id="f_Body" name="f_Body" rows="2" 
        style="display: none;"></textarea>
</div>

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

有了这些SO问题......

jQuery 'if .change() or .keyup()'

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

我在document.Ready中尝试了以下内容：

$('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 enter image description here

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');
});

虽然使用此答案中的代码取决于使用version 1.7 or higher of jQuery。

如果您使用的是旧版本的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);
};

这就是我的方法。希望这对某人有帮助。

您还可以看到-Adding event handler to iframe to invoke on keyup

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

3 个答案: