|
2
|
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> |
