<!DOCTYPE html> <html>

<head>
        <meta charset="utf-8">
        <title>iFrame message passing test</title>
        <meta name="description" content="iFrame message passing test">
        <meta name="viewport" content="width=device-width">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
        <h2>Automagically resizing iFrame</h2>
        <p>Resize window or click one of the links in the iFrame to watch it resize. Or try with <a name="anchorParentTest" href="two.html">two iFrames</a>.</p>
        <div style="margin:20px;">
                <iframe src="frame.content.html" width="100%" scrolling="no"></iframe>
        </div>
        <p id="callback">
        </p>
        <div style="margin: 8px 0;font-size:13px;">
                For details on how this works, see
                <a href="http://davidjbradshaw.github.io/iframe-resizer/">http://davidjbradshaw.github.io/iframe-resizer/</a>.
        </div>

        <!-- MDN PolyFils for IE8 (This is not normally needed if you use the jQuery version) -->
        <!--[if lte IE 8]>
                <script src="../js/ie8.polyfils.min.js"></script>
        <![endif]-->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="../js/client/iframeResizer.contentWindow.min.js" defer></script>

        <script>
                /*
                 * If you do not understand what the code below does, then please just use the
                 * following call in your own code.
                 *
                 *   iFrameResize({log:true});
                 *
                 * Once you have it working, set the log option to false.
                 */

                iFrameResize({
                        log                     : true,                  // Enable console logging
                        inPageLinks             : true,
                        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);
                                document.getElementsByTagName('iframe')[0].iFrameResizer.sendMessage('Hello back from parent page');
                        },
                        closedCallback         : function(id){ // Callback fn when iFrame is closed
                                $('p#callback').html(
                                        '<b>IFrame (</b>'    + id +
                                        '<b>) removed from page.</b>'
                                );
                        }
                });
        </script>

</body>

</html>