Jquery detect change or keyup on body tag within i

2019-04-29 09:12发布

站内问答 / jQuery
580 3 0

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

3条回答
小情绪 Triste *
2楼-- · 2019-04-29 09:33

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().

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-04-29 09:47

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

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
4楼-- · 2019-04-29 09:50

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");
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部