Mercurial > repos > saskia-hiltemann > ireport_dev
comparison iframe-resizer/example/index.html @ 2:3c160414da2e default tip
initial upload
| author | shiltemann |
|---|---|
| date | Thu, 26 Feb 2015 14:05:23 +0100 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 2:3c160414da2e |
|---|---|
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta charset="utf-8"> | |
| 5 <title>iFrame message passing test</title> | |
| 6 <meta name="description" content="iFrame message passing test"> | |
| 7 <meta name="viewport" content="width=device-width"> | |
| 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 9 <script type="text/javascript"> | |
| 10 //MDN PolyFil for IE8 (This is not needed if you use the jQuery version) | |
| 11 if (!Array.prototype.forEach){ | |
| 12 Array.prototype.forEach = function(fun /*, thisArg */){ | |
| 13 "use strict"; | |
| 14 if (this === void 0 || this === null || typeof fun !== "function") throw new TypeError(); | |
| 15 | |
| 16 var | |
| 17 t = Object(this), | |
| 18 len = t.length >>> 0, | |
| 19 thisArg = arguments.length >= 2 ? arguments[1] : void 0; | |
| 20 | |
| 21 for (var i = 0; i < len; i++) | |
| 22 if (i in t) | |
| 23 fun.call(thisArg, t[i], i, t); | |
| 24 }; | |
| 25 } | |
| 26 </script> | |
| 27 </head> | |
| 28 <body> | |
| 29 <h2>Automagically resizing iFrame</h2> | |
| 30 <p>Resize window or click one of the links in the iFrame to watch it resize.</p> | |
| 31 <div style="margin:20px;"> | |
| 32 <iframe src="frame.content.html" width="100%" scrolling="no"></iframe> | |
| 33 </div> | |
| 34 <p id="callback"> | |
| 35 </p> | |
| 36 <div style="margin: 8px 0;font-size:13px;"> | |
| 37 For details on how this works, see | |
| 38 <a href="http://davidjbradshaw.github.io/iframe-resizer/">http://davidjbradshaw.github.io/iframe-resizer/</a>. | |
| 39 </div> | |
| 40 | |
| 41 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| 42 <script type="text/javascript" src="../js/iframeResizer.min.js"></script> | |
| 43 <script type="text/javascript"> | |
| 44 | |
| 45 iFrameResize({ | |
| 46 log : true, // Enable console logging | |
| 47 enablePublicMethods : true, // Enable methods within iframe hosted page | |
| 48 resizedCallback : function(messageData){ // Callback fn when resize is received | |
| 49 $('p#callback').html( | |
| 50 '<b>Frame ID:</b> ' + messageData.iframe.id + | |
| 51 ' <b>Height:</b> ' + messageData.height + | |
| 52 ' <b>Width:</b> ' + messageData.width + | |
| 53 ' <b>Event type:</b> ' + messageData.type | |
| 54 ); | |
| 55 }, | |
| 56 messageCallback : function(messageData){ // Callback fn when message is received | |
| 57 $('p#callback').html( | |
| 58 '<b>Frame ID:</b> ' + messageData.iframe.id + | |
| 59 ' <b>Message:</b> ' + messageData.message | |
| 60 ); | |
| 61 alert(messageData.message); | |
| 62 }, | |
| 63 closedCallback : function(id){ // Callback fn when iFrame is closed | |
| 64 $('p#callback').html( | |
| 65 '<b>IFrame (</b>' + id + | |
| 66 '<b>) removed from page.</b>' | |
| 67 ); | |
| 68 } | |
| 69 }); | |
| 70 | |
| 71 | |
| 72 </script> | |
| 73 | |
| 74 </body> | |
| 75 </html> |