annotate iframe-resizer/test/v1.html @ 9:7300ed4c1481 draft default tip

Uploaded
author saskia-hiltemann
date Mon, 04 Sep 2017 10:49:00 -0400
parents ac5f9272033b
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
1 <!DOCTYPE html>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
2 <html>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
3 <head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
4 <meta charset="utf-8">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
5 <title>QUnit LoadHide</title>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
6 <link rel="stylesheet" href="resources/qunit.css">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
7 </head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
8 <body>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
9 <div id="qunit"></div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
10 <div id="qunit-fixture">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
11
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
12 <div style="width:600px;">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
13 <iframe src="resources/frame.content.html" width="100%" scrolling="no"></iframe>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
14 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
15
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
16 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
17 <script src="resources/qunit.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
18 <script src="resources/jquery.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
19 <script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
20 /*
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
21 * File: jquery.iframeSizer.js
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
22 * Desc: Force cross domain iframes to size to content.
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
23 * Requires: iframeSizer.contentWindow.js to be loaded into the target frame.
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
24 * Author: David J. Bradshaw - dave@bradshaw.net
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
25 * Date: 2013-06-14
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
26 */
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
27
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
28
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
29 (function($) {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
30
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
31 var
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
32 msgId = '[iFrameSizer]', //Must match iframe msg ID
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
33 msgIdLen = msgId.length,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
34 count = 0,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
35 settings,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
36 defaults = {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
37 log: true,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
38 contentWindowBodyMargin:8,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
39 doHeight:true,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
40 doWidth:false,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
41 interval:0,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
42 enablePublicMethods:false,
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
43 callback:function(){}
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
44 };
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
45
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
46
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
47 function setupRAF(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
48 var
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
49 vendors = ['moz', 'webkit', 'o', 'ms'],
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
50 x;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
51
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
52 // Remove vendor prefixing if prefixed and break early if not
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
53 for (x = 0; x < vendors.length && !window.requestAnimationFrame; x += 1) {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
54 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
55 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
56
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
57 // If not supported then just call callback
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
58 if (!window.requestAnimationFrame){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
59 log(' RequestAnimationFrame not supported');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
60 window.requestAnimationFrame = function(callback){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
61 callback();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
62 };
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
63 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
64
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
65 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
66
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
67 function log(msg){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
68 if (window.console){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
69 console.log(msgId + '[Host page]' + msg);
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
70 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
71 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
72
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
73 setupRAF();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
74
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
75 $(window).on('message',function(event){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
76 function receiver(msg) {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
77 function resize(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
78 function setDimension(dimension){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
79 window.requestAnimationFrame(function(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
80 messageData.iframe.style[dimension] = messageData[dimension] + 'px';
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
81 log( ' ' + messageData.iframe.id + ' ' + dimension + ' set to ' + messageData[dimension] + 'px');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
82 });
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
83 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
84
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
85 if(settings.doHeight){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
86 setDimension('height');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
87 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
88
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
89 if(settings.doWidth){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
90 setDimension('width');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
91 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
92 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
93
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
94 function processMsg(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
95 var data = msg.substr(msgIdLen).split(':');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
96
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
97 messageData = {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
98 iframe: document.getElementById(data[0]),
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
99 height: data[1],
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
100 width: data[2]
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
101 };
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
102 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
103
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
104 var messageData = {};
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
105
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
106 //check message is for us.
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
107 if (msgId === msg.substr(0,msgIdLen)){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
108 processMsg();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
109 resize();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
110 settings.callback(messageData,settings);
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
111 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
112 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
113
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
114 receiver(event.originalEvent.data);
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
115 });
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
116
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
117
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
118 $.fn.iFrameSizer = function(options){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
119
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
120 settings = $.extend( {}, defaults, options );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
121
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
122 return this.each(function(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
123 function isIframe(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
124 return iframe.contentWindow ? true : false;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
125 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
126
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
127 //We have to call trigger twice, as we can not be sure if all
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
128 //iframes have completed loading when this code runs.
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
129 function init(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
130 iframe.style.overflow = 'hidden';
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
131 iframe.scrolling = 'no';
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
132
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
133 $(iframe).on('load',function(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
134 trigger('iFrame.onload');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
135 });
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
136 trigger('init');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
137 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
138
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
139 function trigger(calleeMsg){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
140
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
141 function ensureHasId(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
142 if (''===iframe.id){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
143 iframe.id = 'iFrameSizer' + count++;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
144 log(' Added missing iframe ID: '+iframe.id);
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
145 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
146 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
147
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
148 function postMessageToIframe(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
149 var msg = iframe.id + ':' + settings.contentWindowBodyMargin + ':' + settings.doWidth + ':' +
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
150 settings.log + ':' + settings.interval + ':' + settings.enablePublicMethods;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
151 log('[' + calleeMsg + '] Sending init msg to iframe ('+msg+')');
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
152 iframe.contentWindow.postMessage( msgId + msg, '*' );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
153 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
154
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
155 ensureHasId();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
156 postMessageToIframe();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
157 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
158
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
159 var iframe = this;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
160
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
161 if (isIframe()){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
162 init();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
163 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
164 });
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
165 };
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
166
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
167 })( window.jQuery );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
168
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
169
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
170 </script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
171 <script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
172
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
173 'use strict';
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
174 var msgId = '[iFrameSizerTest]:';
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
175
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
176 asyncTest( "postMessage Response", function() {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
177
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
178 $('iframe').iFrameSizer({
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
179 callback:function(messageData){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
180 //console.log('Receive message back from iFrame.')
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
181 ok( true, 'Receive message back from iFrame.' );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
182 ok( '600' === messageData.width, 'iFrame width = 600.' );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
183 start();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
184 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
185 });
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
186 });
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
187
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
188 </script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
189 </body>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
190 </html>