Mercurial > repos > saskia-hiltemann > ireport
view iframe-resizer/example/frame.nested.html @ 7:0f2b740536fb draft
Uploaded
author | saskia-hiltemann |
---|---|
date | Mon, 21 Aug 2017 09:16:07 -0400 |
parents | ac5f9272033b |
children |
line wrap: on
line source
<!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"> <script type="text/javascript"> //MDN PolyFil for IE8 (This is not needed if you use the jQuery version) if (!Array.prototype.forEach){ Array.prototype.forEach = function(fun /*, thisArg */){ "use strict"; if (this === void 0 || this === null || typeof fun !== "function") throw new TypeError(); var t = Object(this), len = t.length >>> 0, thisArg = arguments.length >= 2 ? arguments[1] : void 0; for (var i = 0; i < len; i++) if (i in t) fun.call(thisArg, t[i], i, t); }; } </script> <style> *, *:before, *:after {box-model: border-box;} a { float:right; margin-left:10px;} h2 {margin-top: 0;} </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 type="text/javascript" src="../js/iframeResizer.min.js"></script> <script type="text/javascript"> var level = document.location.search.replace(/\?/,'') || 0; $('iframe').attr('id','nestedIFrame'+level).attr('src','frame.content.html?'+level); iFrameResize({ log : true, // Enable console logging enablePublicMethods : true, // Enable methods within iFrame hosted page 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 $('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> <script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script> </body> </html>