Mercurial > repos > saskia-hiltemann > ireport_devel
comparison iframe-resizer/example/frame.nested.html @ 7:ce8de297bc8b draft
Uploaded
| author | saskia-hiltemann |
|---|---|
| date | Mon, 16 Nov 2015 10:08:53 -0500 |
| parents | 3c160414da2e |
| children |
comparison
equal
deleted
inserted
replaced
| 6:e3cb63c2b7c1 | 7:ce8de297bc8b |
|---|---|
| 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 <style> | |
| 28 *, *:before, *:after {box-model: border-box;} | |
| 29 a { float:right; margin-left:10px;} | |
| 30 | |
| 31 h2 {margin-top: 0;} | |
| 32 </style> | |
| 33 </head> | |
| 34 <body> | |
| 35 <a href="frame.content.html">Back to page 1</a> | |
| 36 <h2>Nested iFrame</h2> | |
| 37 <p>Resize window or click one of the links in the nested iFrame to watch it resize.</p> | |
| 38 <div style="margin:20px;"> | |
| 39 <iframe id="nestedIFrame" src="frame.content.html" width="100%" scrolling="no"></iframe> | |
| 40 </div> | |
| 41 <p id="callback"> | |
| 42 </p> | |
| 43 | |
| 44 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| 45 <script type="text/javascript" src="../js/iframeResizer.min.js"></script> | |
| 46 <script type="text/javascript"> | |
| 47 | |
| 48 | |
| 49 var level = document.location.search.replace(/\?/,'') || 0; | |
| 50 | |
| 51 $('iframe').attr('id','nestedIFrame'+level).attr('src','frame.content.html?'+level); | |
| 52 | |
| 53 iFrameResize({ | |
| 54 log : true, // Enable console logging | |
| 55 enablePublicMethods : true, // Enable methods within iFrame hosted page | |
| 56 resizedCallback : function(messageData){ // Callback fn when message is received | |
| 57 $('p#callback').html( | |
| 58 '<b>Frame ID:</b> ' + messageData.iframe.id + | |
| 59 ' <b>Height:</b> ' + messageData.height + | |
| 60 ' <b>Width:</b> ' + messageData.width + | |
| 61 ' <b>Event type:</b> ' + messageData.type | |
| 62 ); | |
| 63 }, | |
| 64 messageCallback : function(messageData){ // Callback fn when message is received | |
| 65 $('p#callback').html( | |
| 66 '<b>Frame ID:</b> ' + messageData.iframe.id + | |
| 67 ' <b>Message:</b> ' + messageData.message | |
| 68 ); | |
| 69 alert(messageData.message); | |
| 70 }, | |
| 71 closedCallback : function(id){ /// Callback fn when iFrame is closed | |
| 72 $('p#callback').html( | |
| 73 '<b>IFrame (</b>' + id + | |
| 74 '<b>) removed from page.</b>' | |
| 75 ); | |
| 76 } | |
| 77 }); | |
| 78 | |
| 79 | |
| 80 </script> | |
| 81 <script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script> | |
| 82 | |
| 83 </body> | |
| 84 </html> |