Mercurial > repos > saskia-hiltemann > ireport_dev
comparison iframe-resizer/test/v1.html @ 0:c73753f1606f draft
Uploaded
| author | saskia-hiltemann |
|---|---|
| date | Mon, 06 Oct 2014 08:13:54 -0400 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:c73753f1606f |
|---|---|
| 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> |
