Utilizing iframe-resizer when only partial access to hosting page is posessed

309 views Asked by At

everyone!

I'm trying to utilize the following lib (https://github.com/davidjbradshaw/iframe-resizer) to resize an iframe in my company's web-commerce. The thing is, I don't have complete access to the entire webpage, since it is managed by a bigger web-commerce platform. I can only insert snippets of code to the spot the iframe will occupy.

Everything works just fine when I open the snippet of code in my browser, but when I upload it to the actual platform, the iframe stops resizing.

Below is the snippet of code I'm trying to insert into the platform (the target webpage already has the appropriate js script).

<iframe id="frame-one" scrolling="no" frameborder="0" src="https://fastshopwr-a.akamaihd.net/conteudo/samsung/SGWD16N8750KV1/index.html" onload="FrameManager.registerFrame(this)"></iframe>

<style>
    #frame-one { width: 100%; }
</style>

<script type="text/javascript" src="https://fastshopwr-a.akamaihd.net/iframeResizer.min.js"></script>

<script type="text/javascript">
    iFrameResize({
        log                     : true,                  // Enable console logging
        enablePublicMethods     : true,                  // Enable methods within iframe hosted page
        resizedCallback         : function(messageData){ // Callback fn when resize is received
            $('p#callback').html(
                '<b>Frame ID:</b> '    + messageData.iframe.id +
                ' <b>Height:</b> '     + messageData.height +
                ' <b>Width:</b> '      + messageData.width + 
                ' <b>Event type:</b> ' + messageData.type
            );
        },
        messageCallback         : function(messageData){ // Callback fn when message is received
            $('p#callback').html(
                '<b>Frame ID:</b> '    + messageData.iframe.id +
                ' <b>Message:</b> '    + messageData.message
            );
            alert(messageData.message);
        },
        closedCallback         : function(id){ // Callback fn when iFrame is closed
            $('p#callback').html(
                '<b>IFrame (</b>'    + id +
                '<b>) removed from page.</b>'
            );
        }
    });
</script>

Is it possible to bypass this issue?

1

There are 1 answers

0
David Bradshaw On

It is likely that the larger platform runs the JS code in a separated sandboxed iframe, or disables the post message API. You with need to talk with the supplier about this and ask them to fix the issue for you.