Search code examples
iframeiframe-resizer

iFrameResizer - readyCallback seems never called


I am trying to use method readyCallback() in iFrameResizer, but it does not seem to work. When I add the callback to parent iframe object, it is never called:

iFrameResize({
    log : true,
    checkOrigin: false,
    minHeight : 800,
    maxHeight : 4000,
    readyCallback: function(){
        // (!) never called
        console.log('ready parent callback .. '); 
    },
    messageCallback: function(data){
        // works OK
        console.log('message callback .. '); 
        console.log(data);
    },
    initCallback: function(){
        // works OK
        window.scrollTo(0,0); 
        alert("OK initiated");
    }, 
    resizedCallback : function(info){ 
        // works OK
        console.log(info);
        scrollTo(0, info.iframe.offsetTop);
    },
    heightCalculationMethod : 'taggedElement'
}, '#iframe123');

The iframeResizer.contentWindow.js inside iframe element loads and works OK.

Am I missing something? Thank you.


Solution

  • Turns out that method readyCallback was in wrong place. Here is working setup:

    Parent page with iframe element:

    iFrameResize({
        log : true,
        checkOrigin: false,
        minHeight : 800,
        maxHeight : 4000,
        messageCallback: function(data){
            console.log('message callback .. '); 
            console.log(data);
            // scroll to top edge of iframe element
            scrollTo(0, data.iframe.offsetTop);
        },
        initCallback: function(){
            console.log("OK initiated");
            window.scrollTo(0,0); 
        }, 
        resizedCallback : function(info){ 
            console.log(info);
            scrollTo(0, info.iframe.offsetTop);
        },
        heightCalculationMethod : 'taggedElement'
    }, '#iframe123');
    

    Inside iframe element with loaded iframeResizer.contentWindow.js:

    // solution 1:
    window.iFrameResizer = {
        readyCallback: function(){
            // scroll parent to top edge of iframe element
            window.parentIFrame.scrollToOffset(0,0);
        }
    }
    
    // solution 2:
    window.iFrameResizer = {
        readyCallback: function(){
          if('parentIFrame' in window){
              parentIFrame.sendMessage('Loaded iframe ['+window.parentIFrame.getId()+'].');
          }
        }
    }
    
    // load content window at the end
    <script src="/js/iframeResizer.contentWindow.js"></script>