jquery-iframe-auto-height icon indicating copy to clipboard operation
jquery-iframe-auto-height copied to clipboard

Better cross-browser height detection

Open in0ni opened this issue 12 years ago • 0 comments

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.

in0ni avatar Sep 07 '12 18:09 in0ni