Search code examples
fancyboxfancybox-2

How to access an element inside the iframe in aferShow event?

I am using Fancybox 2.1.4. I would like to access the element inside the iframe in the afterShow event.

        $('.fancybox').fancybox({
            type: 'iframe',
            afterShow: function() {

                 //need to access element #mydiv

            }
            iframe: {
                preload: true 
            }
        });

How can I do that? Does preload: true and preload: false has any effect on accessing the element? Suppose that the parent window and the iframe access the pages on the same website.

Solution

  • This is how you can access iframe and, for example, bind custom load event if using v3: 

    $("[data-fancybox]").fancybox({
  iframe : {
    preload: false
  },
  afterLoad : function(instance, slide) {
    slide.$slide.find('iframe').on('load', function() {
      alert('done');
    });
  }
});

    https://codepen.io/anon/pen/yXwoNM?editors=1010