0

I have an iframe/img. I want to trigger the "load" event when the content is completely binded. In the fiddle, it should get a alert message.
So here my requirement is to trigger the event when the content is fully loaded to the iframe/img. Ie if that is an image, if I am not handling this, the user can see the pixel by pixel binding to the img tag.

JS Fiddle

$(document).ready(function(){
    $('#test').attr('src', 'http://www.youtube.com/v/h60r2HPsiuM');
    $('#test').load(function(){
            alert('loaded');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<iframe class="content_tag" id="test" frameborder="0"></iframe>
Sanjay Kumar N S
  • 4,653
  • 4
  • 23
  • 38
  • @musically_ut Can you check the js fiddle? – Sanjay Kumar N S Aug 03 '15 at 12:21
  • Using FF 39.0 and it works – int lawl is over 9000 Aug 03 '15 at 12:23
  • Using FF 39 and it doesn't work. – Pointy Aug 03 '15 at 12:24
  • possible duplicate of [Capture iframe load complete event](http://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event) – michelem Aug 03 '15 at 12:24
  • Simple answer: You can't http://stackoverflow.com/questions/164085/javascript-callback-when-iframe-is-finished-loading Unless the iframe src is within the same domain, in which case you can add a response header ( to that "dynamic src" ) called set-cookie ( with same data ofc ) then sample the client cookies - if the cookie is set you can tell content has loaded.. If you need more just let me know and I'll provide a more detailed example. – elad.chen Aug 03 '15 at 12:24
  • If it worked you would need to assign the handler BEFORE changing the src – mplungjan Aug 03 '15 at 12:26
  • @elad.chen Suppose I have the src when the page load itself, but it may take some time to load the external url to the iframe/img. So here my requirement is to trigger the event when the content is fully loaded to the iframe/img. Ie if that is an image, if I am not handling this, the user can see the pixel by pixel binding to the img tag. – Sanjay Kumar N S Aug 03 '15 at 12:32
  • @Pointy Are you telling it will not work? – Sanjay Kumar N S Aug 03 '15 at 12:33
  • @mplungjan changing that did not make it work for me. – Pointy Aug 03 '15 at 12:36
  • OK I got it to work by using a modern version of jQuery -- http://jsfiddle.net/2wya34qo/1/ – Pointy Aug 03 '15 at 12:40
  • @Pointy that triggers way before the page is loaded – mplungjan Aug 03 '15 at 12:44
  • @mplungjan yes, you're right - it's probably coming from the "load" that happens on the iframe tag, or maybe the enclosing window load. I can't make it fire from the actual frame load, or at least I can't convince myself that it's firing from the frame load. – Pointy Aug 03 '15 at 12:46
  • @SanjayKumarNS The concept of what I'm suggesting can be extracted from this clever plugin http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/ – elad.chen Aug 03 '15 at 12:57

0 Answers0