Mercurial > repos > saskia-hiltemann > ireport
diff iframe-resizer/test/v1.html @ 0:ac5f9272033b draft
first upload
author | saskia-hiltemann |
---|---|
date | Tue, 01 Jul 2014 11:42:23 -0400 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/iframe-resizer/test/v1.html Tue Jul 01 11:42:23 2014 -0400 @@ -0,0 +1,190 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>QUnit LoadHide</title> + <link rel="stylesheet" href="resources/qunit.css"> +</head> +<body> + <div id="qunit"></div> + <div id="qunit-fixture"> + + <div style="width:600px;"> + <iframe src="resources/frame.content.html" width="100%" scrolling="no"></iframe> + </div> + + </div> + <script src="resources/qunit.js"></script> + <script src="resources/jquery.js"></script> + <script> + /* + * File: jquery.iframeSizer.js + * Desc: Force cross domain iframes to size to content. + * Requires: iframeSizer.contentWindow.js to be loaded into the target frame. + * Author: David J. Bradshaw - dave@bradshaw.net + * Date: 2013-06-14 + */ + + + (function($) { + + var + msgId = '[iFrameSizer]', //Must match iframe msg ID + msgIdLen = msgId.length, + count = 0, + settings, + defaults = { + log: true, + contentWindowBodyMargin:8, + doHeight:true, + doWidth:false, + interval:0, + enablePublicMethods:false, + callback:function(){} + }; + + + function setupRAF(){ + var + vendors = ['moz', 'webkit', 'o', 'ms'], + x; + + // Remove vendor prefixing if prefixed and break early if not + for (x = 0; x < vendors.length && !window.requestAnimationFrame; x += 1) { + window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; + } + + // If not supported then just call callback + if (!window.requestAnimationFrame){ + log(' RequestAnimationFrame not supported'); + window.requestAnimationFrame = function(callback){ + callback(); + }; + } + + } + + function log(msg){ + if (window.console){ + console.log(msgId + '[Host page]' + msg); + } + } + + setupRAF(); + + $(window).on('message',function(event){ + function receiver(msg) { + function resize(){ + function setDimension(dimension){ + window.requestAnimationFrame(function(){ + messageData.iframe.style[dimension] = messageData[dimension] + 'px'; + log( ' ' + messageData.iframe.id + ' ' + dimension + ' set to ' + messageData[dimension] + 'px'); + }); + } + + if(settings.doHeight){ + setDimension('height'); + } + + if(settings.doWidth){ + setDimension('width'); + } + } + + function processMsg(){ + var data = msg.substr(msgIdLen).split(':'); + + messageData = { + iframe: document.getElementById(data[0]), + height: data[1], + width: data[2] + }; + } + + var messageData = {}; + + //check message is for us. + if (msgId === msg.substr(0,msgIdLen)){ + processMsg(); + resize(); + settings.callback(messageData,settings); + } + } + + receiver(event.originalEvent.data); + }); + + + $.fn.iFrameSizer = function(options){ + + settings = $.extend( {}, defaults, options ); + + return this.each(function(){ + function isIframe(){ + return iframe.contentWindow ? true : false; + } + + //We have to call trigger twice, as we can not be sure if all + //iframes have completed loading when this code runs. + function init(){ + iframe.style.overflow = 'hidden'; + iframe.scrolling = 'no'; + + $(iframe).on('load',function(){ + trigger('iFrame.onload'); + }); + trigger('init'); + } + + function trigger(calleeMsg){ + + function ensureHasId(){ + if (''===iframe.id){ + iframe.id = 'iFrameSizer' + count++; + log(' Added missing iframe ID: '+iframe.id); + } + } + + function postMessageToIframe(){ + var msg = iframe.id + ':' + settings.contentWindowBodyMargin + ':' + settings.doWidth + ':' + + settings.log + ':' + settings.interval + ':' + settings.enablePublicMethods; + log('[' + calleeMsg + '] Sending init msg to iframe ('+msg+')'); + iframe.contentWindow.postMessage( msgId + msg, '*' ); + } + + ensureHasId(); + postMessageToIframe(); + } + + var iframe = this; + + if (isIframe()){ + init(); + } + }); + }; + + })( window.jQuery ); + + + </script> + <script> + + 'use strict'; + var msgId = '[iFrameSizerTest]:'; + + asyncTest( "postMessage Response", function() { + + $('iframe').iFrameSizer({ + callback:function(messageData){ + //console.log('Receive message back from iFrame.') + ok( true, 'Receive message back from iFrame.' ); + ok( '600' === messageData.width, 'iFrame width = 600.' ); + start(); + } + }); + }); + + </script> +</body> +</html> \ No newline at end of file