Get Height from Dynamically Generated iFrame Returns Function From jQuery JS File

Question

Now, this is a weird one and I can't begin to figure out why this is happening. Via a click, I am generating a dynamic iframe with the source coming from the 'href' attribute in an <a> tag, destroying it on a different click. I am trying to get the height of the <body> tag inside that iframe in order to begin the process of changing the height and width based a variety of expandable regions. But rather than, in my example below, getting the height, I actually get a function directly from the jQuery Javascript file (in my case, jquery-1.11.1.js). Here's the relevant code:

$(document.body).on('click', 'table.foo tr td a', function(e){
          e.preventDefault(); // anchor won't go to new page
          e.stopPropagation(); // bubble-free click
          var framesrc = $(this).attr('href')
          $(this).closest('tr.varrow').after('<tr class="varFrameTr"><td colspan="2" class="varFrameCont"><iframe name="varFrame" class="varFrame" src='+framesrc+'></iframe><div class="closeiframe"><span class="glyphicon glyphicon-remove-sign"></span></div></td></tr>' );
          var color = '';
          $('.varFrameTr').fadeIn(750, function(){
            if( $('td.varFrameCont').length )       
                {
                  $(this).find('iframe.varFrame').contents().on('click', 'div#framefoo' ,function(){
                    var tz = $(this).height;
                    console.log(tz);
                  }); 
                } else {
                  console.log('nada');
                }
      });
  });

Briefly, div#framefoo is the main container after <body> in the iframe I am trying to get the height from. But when the new table row fades up and the iframe is invoked, the result of getting that height in the console returns a function in jquery-1.11.1.js beginning at line 10206:

function( margin, value ) {
        var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
            extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );

        return access( this, function( elem, type, value ) {
            var doc;

            if ( jQuery.isWindow( elem ) ) {
                // As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
                // isn't a whole lot we can do. See pull request at this URL for discussion:
                // https://github.com/jquery/jquery/pull/764
                return elem.document.documentElement[ "client" + name ];
            }

            // Get document width or height
            if ( elem.nodeType === 9 ) {
                doc = elem.documentElement;

                // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
                // unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
                return Math.max(
                    elem.body[ "scroll" + name ], doc[ "scroll" + name ],
                    elem.body[ "offset" + name ], doc[ "offset" + name ],
                    doc[ "client" + name ]
                );
            }

            return value === undefined ?
                // Get width or height on the element, requesting but not forcing parseFloat
                jQuery.css( elem, type, extra ) :

                // Set width or height on the element
                jQuery.style( elem, type, value, extra );
        }, type, chainable ? margin : undefined, chainable, null );
    };

It's the same result if I just grab the <body> tag and try to get its height, instead. I've seen errors that makes my jQuery functions break by conflicting with something in jQ's actual JS, but never a direct return of the code as a returned value. Any ideas both why this is happening and how to get an element within an iframe's height and width without this very odd error? Thanks for your help.

score 0 · Accepted Answer · edited May 23 '17 at 12:07

I'd still love to know why instead of some numerical pixel value for height I got a function from the version of jQuery I'm using: jquery-1.11.1.js. But, thanks to the explanation for getting iframe element heights laid out at Get height of element inside iframe with jQuery, at least I can get that height information correctly now. The key conditional from my code above now reads:

if( $('td.varFrameCont').length ) {
                  var mydiv = $('iframe.varFrame').contents().find('body');
                  var h = mydiv.height();
                  console.log(h);
                } else {
                  console.log('nada');
                }

And voila, there's my height information. Meantime, if others can help me understand why I got code directly from jQuery's JS file, I suspect this will prove useful down the road to others.

Get Height from Dynamically Generated iFrame Returns Function From jQuery JS File

1 Answers1