可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a jwysiwyg content editor control on my page. The control works by creating itself in an iframe which has a full html page code within it.

I wish to detect if there has been a change or keyup so I can use our "indicate the record needs to be saved" code. We have input boxes and this work fine, just this 3rd party editor control is giving us problems.

Here is what the page source looks like:

<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>

See that the body tag contains the changes in real time.

With these SO questions...

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

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

I have tried the following in 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');
});

Hopefully this printscreen will help. LARGER

回答1:

You seem to be along the right track.

I wonder whether this would work for you:

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

So in your case I suppose:

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

Although using the code in this answer depends on using version 1.7 or higher of jQuery.

If you are using an older version of jQuery, you could make use of live which is deprecated as of version 1.7, or perhaps delegate. I'm not too sure. You're best bet may be to use the latest version of jQuery with .on() and .off().

回答2:

I am not sure if you have access to edit the inner contents of the iframe but I had a similar issue and this worked for me:

Inside the iframe body:

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

Within the content of the parent html page:

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

回答3:

I have an answer that doesn't uses Jquery. If someone like me searching for this I think this will help

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

This is how I did it. Hope this helps someone.

Also you can see - Adding event handler to iframe to invoke on keyup

Jquery detect change or keyup on body tag within i

问题:

回答1:

回答2:

回答3:

收藏的人(0)

Jquery detect change or keyup on body tag within i

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮