Mercurial > repos > saskia-hiltemann > ireport

comparison iframe-resizer/example/index.html @ 0:ac5f9272033b draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first upload
author saskia-hiltemann
date Tue, 01 Jul 2014 11:42:23 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:ac5f9272033b
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>