Mercurial > repos > saskia-hiltemann > ireport
diff 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 diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/iframe-resizer/example/index.html Tue Jul 01 11:42:23 2014 -0400 @@ -0,0 +1,75 @@ +<!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> \ No newline at end of file