All geek questions in one place

JQuery detects a change or click on a body tag inside an iframe

I have a jwysiwyg content editor control on my page. Management works by creating itself in an iframe that contains the full HTML code of the page inside it.

I want to determine if there was a change or keyup , so I can use our code "Indicate that the record should be saved." We have input fields, and this work is great, just this editor of third-party editors gives us problems.

Here's 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 real-time changes.

With these SO questions ...

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

stack overflow

I tried the following in a document. Done:

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

Hope this printer helps. Larger enter image description here

+4
source share
2 answers

You seem to be on the right track.

I wonder if this will 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 the use of the code in this answer depends on the use of version 1.7 or later of jQuery .

If you are using an older version of jQuery, you can use live , which is deprecated since version 1.7, or possibly delegate. I'm not too sure. It is best to use the latest jQuery with .on () and .off ().

+6
source

I'm not sure if you have access to edit the internal contents of the iframe, but I had a similar problem and this worked for me:

Inside the iframe body:

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

Inside the contents of the parent html page:

 function iChanged(){ alert("I changed"); }
+1
source

Source: https://habr.com/ru/post/1400345/

More articles:


All Articles