Jquery detect change or keyup on body tag within iframe

问题

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

来源：https://stackoverflow.com/questions/9614545/jquery-detect-change-or-keyup-on-body-tag-within-iframe

标签

jquery

dom

iframe

jquery-selectors