house9/jquery-iframe-auto-height

jQuery plugin to set the height of an iframe to its contents height

jquery-iframe-auto-height's Issues

hi house: this is about the callback function issues

options.callback({newFrameHeight: newHeight});

you see in the callback function we can only access the newHeight . actually we often want to access the iframe element too . just use the "call" or "apply" thus we can use the "this" to refer to the current iframe element !

best wishes !

Better cross-browser height detection

i am finding that the height of the child is not always detected properly by firefox. with this plugin using the body scrollHeight at times returns a wrong value -- finding this with version 15.0 of FF.

after my multiple test (before i started using this plugin -- which rocks!), i am finding its best to test for at least two different ways to get the height, and grab the largest value of both -- this way preventing content being cut off in many cases too short. i have found this works best for FF and IE.

not sure how to submit a patch, so here is the code:

instead of:

       var $body = $(iframe, window.top.document).contents().find('body');
       var newHeight = $body[0].scrollHeight + options.heightOffset;

i have this:

        var largestHeight;
        var newHeight;

        // different methods to get the height, browsers return differnt values
        var heights = {
          bodyScrollHeight: $(iframe, window.top.document).contents().find('body')[0].scrollHeight,
          htmlHeight: $("html", iframe.contentWindow.document).height()
        };

        // test different heights and return the largest
        for(var key in heights){
          if(typeof largestHeight == 'undefined'){
            largestHeight = heights[key];
          }else if(heights[key] > largestHeight){
            largestHeight = heights[key];
          }

          if(options.diagnostics){
            debug(key + ": " + heights[key]);
          }
        };

        newHeight = largestHeight + options.heightOffset;

this seems to solve inconsistencies with method to acquire height. i am not using the straight up dom height ( ...document).height() ) since it can return absurdly large numbers -- but getting the height of html & body seem to work rather well.

----------------------> Looking for maintainer

Are you interested in maintaining this jquery plugin?
I don't have much time to spend on it

hit me up on email if you are interested (find my email from one of the git commits)

Firefox - Height is not updated when following a link

Plugin works as expected when first loading the iframe, but it does not resize it when following a link.

calculation of newHeight based on minHeight in IE and FF

options.minHeight is interpreted as a string in IE and FF
resulting in incorrect newHeight.

newHeight = options.minHeight + options.heightOffset;

iframe-auto-height + .scrollable (jquerytools)

hi there i am trying to use in the same page both .scrollable from jquery tools (http://flowplayer.org/tools/demos/scrollable/index.html) and iframe-auto-height jquery plugin .

both of the scripts works fine, when used alone, but both of them freeze when put together.

i also tried to use jquery no-conflict without any success.

Resize does not work when calling with class

The resize fires when doing a blanket jQuery('iframe')... call but when calling a specific class it doesn't fire jQuery('iframe.my_class')

Load event issue on Webkit/Opera

Hi there,

I think there is a problem with the load event mechanism used for Webkit/Opera browsers.

In some case, script never goes inside $(this).load() event (at line 225), so iframe resize does not happen. For example, it occurs when I dynamically add DOM elements with an Ajax return to iframe content. Then, when I call a resize, $(this).load() event is not thrown.

On Firefox, it's working well (as we don't use $(this).load() event).

Any idea?
Thanks!

No resizing in IE/FireFox with JQM

Your resizing plugin works great - except when I use it inside Jquery Mobile, it then only works in Chrome & Safari. There are no errors in the dev tools console. iframe height never extends beyond 150px for both IE & FireFox (no matter how much content is in iframe). Any ideas? THANKS.

I downloaded the latest zip today (1/29/15)
Also using: jquery.browser.js

Awful double refresh effect

Anyone can tell me how to remove the awful double refresh effect of this plugin?
e.g. http://arthub.hyperborea.com/arthub-container/patrimonio/foto

using a java script toggler inside jquery-iframe-auto-height

I am trying to use javascript toggle elements inside this jquery-iframe-auto-height code. The code works fine with standard html page code but not with the javascript toggler.

The jscript code that creates the toggler is:

<script type="text/javascript"> $(document).ready(function(){ $('div.toggler-5').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); }); function doOnClick() { alert('callback: onClick'); } function doOnHide() { alert('callback: onHide'); } function doOnShow() { alert('callback: onShow'); } </script>

Where the toggle element is called further into the html page Example

And any number of these might be called making the page height different with any click of the mouse.

I hope this makes sense.

Auto width?

Are there any plans to make this plugin auto calculate width as well as height?

$.browser has been removed from jQuery 1.9.0

Another way must be found to detect browser.
The $.browser was already deprecated for a long time.

can't rezise when click back button

hi guys,

jquery can't rezise when click browser's back button, (firefox 7)
in debug mode, its return old value.

thanks

Not working in aacorians

Height Auto resize not working in Accordins, Only working first open accordian.

'windowResizeFunction' not working on my project

Hi,
I have implemented the code but don't manage to make the "windowResizeFunction" work :

var windowResizeFunction = function (resizeFunction, iframe) {
  $(window).resize(function () { resizeFunction(iframe); }); 
};
$('iframe').iframeAutoHeight({triggerFunctions:[windowResizeFunction]}); 

Inclusion:
jquery.browser.js
jquery.iframe-auto-height.plugin.1.9.5.min.js

Am I missing something ?

Kind regards,

Jochuaf

Window Resize

This object will not resize on window/browser resize. Is there any way to bind it to window resize?

If this is not possible it might be nice to be able to trigger 'resize'

Not working with IE?

Hello.

Isn't the code working with Internet explorer 8? My page is working fine with Firefox.

DOM changes lost after initializing plugin in Chrome/Safari and Opera

In Chrome/Safari and Opera, if you modify the iframe's DOM before or immediately after initializing the auto-height plugin, you will lose all your changes! This is because the plugin will reload the iframe asynchronously at the end of plugin initialization, and this creates a nasty race condition that is very difficult to debug.

See lines 195-198 of jquery.iframe-auto-height.plugin.1.9.3.js:

// Check if browser is Webkit (Safari/Chrome) or Opera
if ($.browser.webkit || $.browser.opera) {

  /* ... */

  // Safari and Opera need a kick-start.
  var source = $(this).attr('src');
  $(this).attr('src', '');
  $(this).attr('src', source);
}

Note that if you make DOM changes immediately after plugin initialization, and if the iframe reloads slowly, your changes will be overwritten due to a race condition.

As a temporary workaround, I have commented-out lines 195-198 and am manually calling the triggerFunction.

Clinking on <a> changes iframe SRC. Need to be clicked 2 times to work

I have a iframe where the src is changed whenever a anchor tag is clicked. I have " $('iframe').iframeAutoHeight();" in the function but it seems like I need to click the anchor a second time in order for the iframe to be resized correctly. Any ideas for a fix? seems to be doing it across all browsers. Thanks!

jQuery load event loads sporadically in IE8

I was using the code this plugin is based on and I noticed that it worked sporadically in IE8. It didn't throw any errors, it just never fired the load event. Google brought me to this plugin, so I gave it a whirl. Same thing. Executing the plugin with the debug parameter showed me that it was never getting to the load event. As a quick and dirty fix for the site I'm working on, I ended up adding $.browser.msie to the opera/webkit check (Line 72, if ($.browser.safari || $.browser.opera || $.browser.msie){).

iFrame contents erased after calling iframeAutoHeight

Code sample to reproduce

<iframe id=test height=100px width=100px></iframe>
<button onclick="$('#test').contents().find('html').html('adam');"></button>
<button onclick="$('#test').contents().find('html').html('adam<BR><BR><BR>zochowski');"></button>
<button onclick="$('#test').iframeAutoHeight({debug: true});"></button>

Chrome Issue - plugin not working

I am using jquery.iframe-auto-height.js and iframe resizing fine in IE and FFox but its not resizing in chrome. I am getting the below problem at line No# 87
Uncaught TypeError: Cannot read property 'scrollHeight' of undefined
Please let me know the solution.

Update nuget package?

When will the nuget package get updated to the latest version (1.9.5)? It's currently at 1.9.3

Permission denied to access property 'ownerDocument'

Hi there!

I followed the instructions exactly, I have an error: Permission denied to access property 'ownerDocument'.

I am using this with FF, user agent: iPhone 3.

Any ideas?

Thanks in advance.

Not working with external pages?

Hello.
Does this not work when loading external pages?

Chrome Version 31.0.1650.63 m issue

Hi,

I have tried to used this plugin but as its mentioned in above earlier two issues it work perfect in FF and IE but not in chrome. I am using Version 31.0.1650.63 m. Any help.

Best Regards,
Jitendra

Chrome - $body.length == 0 when loading a link

The plugin works as expected when first loading the iframe.
When clicking on a link inside the iframe, though, the body selector returns an empty array.

iframe has collapsable menu

My iframe has a src loading which has dropdown list when user clicks an <a> under <li>.
Is it possible that when that <a> is pressed and the content becomes larger, we can fire a resize event.
If I use <frame> with no scrolls, then if content is more it gets cuts off.

problem with iframe height when the content has a UI modified by javascript

For static html content works fine
But when we have few html content but this is not static the html components has been modified by javascript via dom doesn't works in firefox however works fine in chrome, you can reproduce that if you load on iframe content a page that has a Jquery UI components like acordion or any other.

not issue but enhancement

i've modified the code to allow animation while setting the iframe height.
here's the code(based on 1.6.0):
/_jslint white: true, indent: 2, onevar: false, browser: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: false, newcap: true, immed: true */
/_global window, console, jQuery, setTimeout */

/*
Plugin: iframe autoheight jQuery Plugin
Version: 1.6.0
Author and Contributors

NATHAN SMITH (http://sonspring.com/)
Jesse House (https://github.com/house9)
aaron manela (https://github.com/aaronmanela)
Hideki Abe (https://github.com/hideki-a)
Patrick Clark (https://github.com/hellopat)
ChristineP2 (https://github.com/ChristineP2)
Mmjavellana (https://github.com/Mmjavellana)
yiqing-95 (https://github.com/yiqing-95)

File: jquery.iframe-auto-height.plugin.js
Remarks: original code from http://sonspring.com/journal/jquery-iframe-sizing
Description: when the page loads set the height of an iframe based on the height of its contents
see README: http://github.com/house9/jquery-iframe-auto-height

*/
(function ($) {
$.fn.iframeAutoHeight = function (spec) {

// set default option values
var options = $.extend({
    heightOffset: 0, 
    minHeight: 600, 
    callback: function (newHeight) {},
    debug: false,
    diagnostics: false // used for development only
  }, spec);

// logging
function debug(message) {
  if (options.debug && options.debug === true && window.console) {
    console.log(message);
  }
}    

// not used by production code
function showDiagnostics(iframe, calledFrom) {
  debug("Diagnostics from '" + calledFrom + "'");      
  try {
    debug("  " + $(iframe, window.top.document).contents().find('body')[0].scrollHeight + " for ...find('body')[0].scrollHeight");                  
    debug("  " + $(iframe.contentWindow.document).height() + " for ...contentWindow.document).height()");
    debug("  " + $(iframe.contentWindow.document.body).height() + " for ...contentWindow.document.body).height()");        
  } catch (ex) {
    // ie fails when called during for each, ok later on
    // probably not an issue if called in a document ready block         
    debug("  unable to check in this state");
  }
  debug("End diagnostics -> results vary by browser and when diagnostics are requested");
}

// show all option values
debug(options);    

// ******************************************************
// iterate over the matched elements passed to the plugin ; return will make it chainable
return this.each(function () {

  // for use by webkit only
  var loadCounter = 0;
  var currentHeight;

  // resizeHeight
  function resizeHeight(iframe) {
    if (options.diagnostics) {
      showDiagnostics(iframe, "resizeHeight");
    }     

    // get the iframe body height and set inline style to that plus a little

// var $body = $(iframe, window.top.document).contents().find('body');
// var newHeight = $body[0].scrollHeight + options.heightOffset;
var newHeight = $(iframe).contents().find("body").height();

    if (newHeight < options.minHeight) {          
      debug("new height is less than minHeight");
      newHeight = options.minHeight + options.heightOffset;
    }

    debug("New Height: " + newHeight);

// iframe.style.height = newHeight + 'px';
// alert('current: '+iframe.style.height+'. new: '+newHeight);
// iframe.style.height = '0px';
$(iframe).animate({height:newHeight+'px'},{duration:500});
options.callback.apply($(iframe), [{newFrameHeight: newHeight}]);
}

  // debug me
  debug(this);    
  if (options.diagnostics) {
    showDiagnostics(this, "each iframe");
  }      

  // Check if browser is Opera or Safari (Webkit really, so includes Chrome)
  if ($.browser.safari || $.browser.opera) {
    debug("browser is webkit or opera");

    // Start timer when loaded.
    $(this).load(function () {
      var delay = 0;
      var iframe = this;  
      // Reset iframe height to 0 to force new frame size to fit window properly          
      currentHeight = iframe.style.height;

// alert('current iframe: '+currentHeight);
// iframe.style.height = '0px';
// $(iframe).animate({height:'0px'},{queue:false,duration:1000});
var delayedResize = function () {
resizeHeight(iframe);
};

      if (loadCounter === 0) {
        delay = 500; // delay the first one
      }

      debug("load delay: " + delay);
      setTimeout(delayedResize, delay);
      loadCounter++;          
    });

    // Safari and Opera need a kick-start.
    var source = $(this).attr('src');
    $(this).attr('src', '');
    $(this).attr('src', source);
  } else {
    // For other browsers.
    $(this).load(function () {
      resizeHeight(this);
    });
  } // if browser

}); // $(this).each(function () {    

}; // $.fn.iframeAutoHeight = function (options) {
}(jQuery)); // (function ($) {

Does not work on www prefix

Hello,

The jquery does not seem to work (hence fails to append the height class in the iframe) if I put the www prefix on the URL.

Any suggestion?

This doesn't work on Opera?

In Opera, the plugin errors

IE bug

For IE 8.0 there was a bug : it was not able to compute the iframe height.
I made this patch, and now it's working :

if ($.browser.msie) {
                    var newHeight = iframe.contentWindow.document.body.scrollHeight + options.heightOffset;
                } else {
                    var newHeight = iframe.contentWindow.document.body.offsetHeight + options.heightOffset;
                }

Seems that IE doesn't understand the offsetHeight but the scrollHeight ...
Anyway, thanks for this plugin :!

Trigger event for select element?

I tried adding a trigger element for when a select element is changed. I'm using DataTables inside an iframe and the table length selector is a <select> element. When the user changes from say 25 rows to 50 rows, I'd like a trigger to occur that tells the iframe to resize. I have the default 'a' trigger working fine, but can't get this select to work. Here is the code I've tried:

    // fire iframe resize when a select element is changed
    var selectFunction = function (resizeFunction, iframe) {
      jQuery('select').change(function () {
        alert('debug: you changed something'); // this never fires
        jQuery(iframe).contents().find('body').html(''); // clear content of iframe
        console.debug("select changed - firing resizeHeight on iframe");
        resizeFunction(iframe);
      });
    };

add to npm registry

Can you please add jquery-iframe-auto-height to the https://www.npmjs.com package registry? I've seen your package.json, but the package is not in the registry.

Height set to zero when using Chrome

Using Chrome 13.0.782.220 m on Win7 the iframe size is set to zero.

Removing the "($.browser.safari || $.browser.opera)" check seems to solve it....

Ivar

Resizing not working in IE11

Hello -

I downloaded release 1.9.5 and tried to run the demo "as-is" in different browsers. Everything works great except for IE11. The resize did not work. Please advise on how to fix. Thanks.

Firefox issue.

Hi, for static contents I've seen that works fine, but when the content is a rightest form that submits to other short form, again the iframe doesn't resizing, only happens in firefox :( , in chrome works very good!, no testing in others browsers.

NOTE. those are normal forms without javascript.

Please add to Jam

http://jamjs.org/packages/#/search/jquery-iframe-auto-height

Resize not working in Firefox with data tables

Hi,

My problem is similar to eriknyk's. I'm loading several different sized datatables into the same iFrame and need the height to adjust. This works well in chrome and IE9 but not in Firefox. Is there a hack for this?

Thank you.