Iframe Auto Height - Jquery Plugin

This plugin can get contents of iframe and set height of iframe automatically. Also it has cross-domain fix (*).

Iframe Height Jquery Plugin

(Version 1.2.5) - 09.10.2013

This plugin can get contents of iframe and set height of iframe automatically. Also it has cross-domain fix (* You should read tutorial below).

Uncompressed Version : 13.8KB (2.69KB gzipped) Compressed Version : 6.28KB (2KB gzipped)

Usage



Examples


Basic Usage :

$(document).ready(function(){
    $('#autoIframe').iframeHeight();
});

or

$(document).ready(function(){
    $.iframeHeight('#autoIframe');
});

Debug Mode Usage :

$('#autoIframe').iframeHeight({
    debugMode : true
});

Full Options Usage :

$('#autoIframe').iframeHeight({
    resizeMaxTry         : 2,  
    resizeWaitTime       : 300,    
    minimumHeight        : 100, 
    defaultHeight        : 500,   
    heightOffset         : 90,    
    exceptPages          : "",  
    debugMode            : false,
    visibilitybeforeload : true,
    blockCrossDomain     : true,
    externalHeightName   : "bodyHeight",
    onMessageFunctionName: "getHeight",
    domainName           : "*",
    watcher              : false,
    watcherTime          : 400
});

Options



Functions


These are triggers for iframe so You can use these like "$('#iframe').trigger("FUNCTIONNAMES");"


Details


  • iframeheight.js is development version. iframeheight.min.js is produce version (minified).
  • When you use it for cross domain fix, You must use postMessage function on page in iframe. (Click Here or Click Here for Details). Tutorial is below
  • You shouldn't use it on local because it doesnt work correctly in chrome (chrome gives cross domain error on local)
  • Cross-Domain and Watcher cannot work together. If you want to enable watcher, you cannot use crossdomain fix.

Demos


You can see files inside of Demos Folder.


Change Log


Version 1.2.5 (09.10.2013) :

  • Fixed IE8 postMessage issue (Thanks to Lincetto)
  • Fixed setTimeout call when jQuery is in noConflict mode (Thanks to Thibaud Colas)
  • Fixed Iframe Location (Thanks to James75)
  • Fixed Watcher Update Flick
  • Added Contributors & TODO List sections to readme file

Version 1.2.4 (12.09.2013) :

  • Now you can trigger update from external page (Crossdomain)
  • Added Cross Domain Click Trigger Demo
  • Fixed container height setter

Version 1.2.3 (18.08.2013) :

  • Cross domain & Watcher control added
  • Cross domain number control fixed
  • Watcher scroll problem fixed

Version 1.2.2 (12.08.2013) :

  • Added Watcher! Now plugin can control iframe height automatically.
  • Added 2 Trigger: updateIframe & killWatcher (Look "Functions" Title for Details)
  • Added Watcher Demo Page
  • Added Github Tags
  • Fixed ID Problem (Thanks to Thibaud Colas)

Version 1.2.1 (20.04.2013) :

  • Fixed Cross-domain check for Internet explorer 7
  • Changed ScrollHeight() to Jquery's Height() (Thanks to archiechen)

Version 1.2.0 (20.02.2013) :

  • Jquery 1.9.x compatible now
  • Cross Domain Demo added
  • Cross Domain Tutorial added (look below)
  • Added 2 options (onMessageFunctionName, DomainName)
  • Completely Updated Cross-domain fix (It tested on Chrome, Firefox, IE9, IE8)
  • Added External Function ($.iframeHeightExternal())

Version 1.1.0 (27.08.2012) :

Version 1.0.0 (21.06.2012) :

  • Files uploaded to Github

Author


Ilker Guller (http://ilkerguller.com)


Contributors



TODO List


  • Works with two or more iframes
  • Decrease memory uses

For Issues, New Features, Grammar problems :)


If you find issues or you want to add new features, feel free to post them to the 'Issues' tab.


License


MIT License

Copyright (c) 2012 İlker Güller

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GPL License

Copyright (c) 2012 İlker Güller

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.


Cross Domain Tutorial


You can test it after upload "crossdomain_inpage.html" file (its in demos folder) to external server.

Firstly, you must upload this plugin to 2 server (base website and external server). After that, call " $.iframeHeightExternal();" function from external page. Tadaam! It finished. :)

Important thing is, if you change default options (in your base website), you must add your setting object to function ($.iframeHeightExternal()) that using on your external website. For Example;

when using it in your base website

$('#autoIframe').iframeHeight({
    debugMode : true,
    minimumHeight: 450,
    onMessageFunctionName: "dummyFunc"
});

then set it in your external site

$.iframeHeightExternal({
    debugMode : true,
    minimumHeight: 450,
    onMessageFunctionName: "dummyFunc"
});

If you want to trigger from any element to update iframe

var iframeExt = $.iframeHeightExternal({
    debugMode : true,
    minimumHeight: 450,
    onMessageFunctionName: "dummyFunc"
});
$('button').on("click", function(){ iframeExt.update(); });