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>