<!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">
        <style>
                *, *:before, *:after {box-model: border-box;}
                a { float:right; margin-left:10px;}

                h2 {margin-top: 0;}
                body{margin:8px !important}
        </style>
</head>
<body>
        <a href="frame.content.html">Back to page 1</a>
        <h2>Nested iFrame</h2>
        <p>Resize window or click one of the links in the nested iFrame to watch it resize.</p>
        <div style="margin:20px;">
                <iframe id="nestedIFrame" src="frame.content.html" width="100%" scrolling="no"></iframe>
        </div>
        <p id="callback">
        </p>

        <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>
                var level = document.location.search.replace(/\?/,'') || 0;

                $('iframe').attr('id','nestedIFrame'+level).attr('src','frame.content.html?'+level);

                /*
                 * 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 message 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
                                parentIFrame.sendMessage(messageData.message + ' (via ' + $('iframe').attr('id') + ')');
                        },
                        closedCallback         : function(id){ /// Callback fn when iFrame is closed
                                $('p#callback').html(
                                        '<b>IFrame (</b>'    + id +
                                        '<b>) removed from page.</b>'
                                );
                        }
                });
        </script>       

</body>

</html>