Mercurial > repos > saskia-hiltemann > ireport
view iframe-resizer/example/index.html @ 0:ac5f9272033b draft
first upload
author | saskia-hiltemann |
---|---|
date | Tue, 01 Jul 2014 11:42:23 -0400 |
parents | |
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> </head> <body> <h2>Automagically resizing iFrame</h2> <p>Resize window or click one of the links in the iFrame to watch it resize.</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> <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"> 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> </body> </html>