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