Mercurial > repos > saskia-hiltemann > ireport
view iframe-resizer/test/v1.html @ 6:42076db43d42 draft
Fixed auto resizing plus various other minor bugs
author | saskia-hiltemann |
---|---|
date | Mon, 16 Nov 2015 08:56:22 -0500 |
parents | ac5f9272033b |
children |
line wrap: on
line source
<!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>