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