从 jQuery JS 文件中动态生成的 iFrame 返回函数获取高度答案

【问题标题】：Get Height from Dynamically Generated iFrame Returns Function From jQuery JS File从 jQuery JS 文件中动态生成的 iFrame 返回函数获取高度
【发布时间】：2016-07-11 07:51:59
【问题描述】：

现在，这是一个奇怪的问题，我无法开始弄清楚为什么会发生这种情况。通过单击，我生成了一个动态 iframe，其来源来自 <a> 标记中的“href”属性，在不同的单击时将其销毁。我正在尝试获取该 iframe 内 <body> 标记的高度，以便开始根据各种可扩展区域更改高度和宽度的过程。但是，在下面的示例中，我实际上并没有直接从 jQuery Javascript 文件（在我的例子中为 jquery-1.11.1.js）中获取一个函数，而不是获取高度。以下是相关代码：

$(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');
                }
      });
  });

简而言之，div#framefoo 是我试图从中获取高度的 iframe 中 <body> 之后的主要容器。但是当新表行淡出并调用 iframe 时，在控制台中获取该高度的结果会返回 jquery-1.11.1.js 中从第 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 );
    };

如果我只是抓住<body> 标签并尝试获取它的高度，结果是一样的。我已经看到了使我的 jQuery 函数因与 jQ 的实际 JS 中的某些内容发生冲突而中断的错误，但从来没有直接将代码作为返回值返回。关于为什么会发生这种情况以及如何在 iframe 的高度和宽度内获取元素而不会出现这个非常奇怪的错误的任何想法？感谢您的帮助。

【问题讨论】：

标签： jquery iframe

【解决方案1】：

我仍然很想知道为什么我从我正在使用的 jQuery 版本中获得了一个函数，而不是一些数字像素值来表示高度：jquery-1.11.1.js。但是，感谢Get height of element inside iframe with jQuery 中关于获取 iframe 元素高度的解释，至少我现在可以正确获取该高度信息。我上面代码中的关键条件现在是：

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

瞧，这是我的身高信息。同时，如果其他人可以帮助我理解为什么我直接从 jQuery 的 JS 文件中获取代码，我怀疑这将证明对其他人有用。

【讨论】：