无法从 JavaScript 中 iframe 中使用的内部页面获取正确的高度答案

【问题标题】：Unable to get proper height from internal page used within an iframe in JavaScript无法从 JavaScript 中 iframe 中使用的内部页面获取正确的高度
【发布时间】：2016-09-15 15:33:09
【问题描述】：

我正在从事一个需要将另一个网站显示到 iframe 中的网络项目。我阅读了 POSTMESSAGE javascript 方法，以便告诉页面容器（具有<iframe> 标签的页面容器）iframe 中使用的页面的高度。

问题很简单。当我加载“内部页面”在新标签上（将在 iframe 中加载的那个）并尝试获取文档的高度时，我得到“380”作为值，这我认为正确的是没有加载到 iframe 中。

另一方面，当我尝试从“容器页面”（具有 iframe 标签的页面）呈现 iframe 并检查同一脚本（在“内部页面”中运行）中发生的情况时，我总是得到 150px 的值。见下图：

我真的不知道这个值是从哪里来的，但是当你把它放在 iframe 中时，我不知道如何获得正确的值。

我做错了什么？有什么想法吗？

编辑

我忘了提到我基于以下 URL 使用了这种方法： http://michilehr.de/resize-iframe-by-its-content-cross-domain/

【问题讨论】：

我假设您可以控制这两个网站，因为您使用的是 postMessage API，对吗？
是的，我忘了提。我正在使用这两个站点......但在生产环境中，两者都有不同的域，所以我需要这个解决方案是跨域的。

标签： javascript jquery html css iframe

【解决方案1】：

您帖子中的链接解释了 postMessage 事件的机制，几乎是正确的。它的示例代码适用于 Firefox 和 IE，但不适用于 Chrome。但实际上，您需要做的就是将 iframe 源代码中的 document.body.scrollHeight 替换为 document.documentElement.offsetHeight，然后它就可以跨浏览器兼容了。

所以，作为一个例子，iframe 可以说

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>the frame</title>
  <script>
   window.onload = function() {
    // post our message to the parent
    window.parent.postMessage(
     // get height of the content
     document.documentElement.offsetHeight
     // set target domain
     ,"*"
    )
   };
  </script>
 </head>
 <body>
  <p>See the frame. It is the correct height.</p>
 <body>
</html>

和父页面

// browser compatibility: get method for event 
// addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
var myEventMethod =
  window.addEventListener ? "addEventListener" : "attachEvent";
// create event listener
var myEventListener = window[myEventMethod];
// browser compatibility: attach event uses onmessage
var myEventMessage =
  myEventMethod == "attachEvent" ? "onmessage" : "message";
// register callback function on incoming message
myEventListener(myEventMessage, function(e) {
  // we will get a string (better browser support) and validate
  // if it is an int - set the height of the iframe #my-iframe-id
  if (e.data === parseInt(e.data))
    document.getElementById('my-iframe-id').height = e.data + "px";
}, false);

iframe {
  border: 2px inset #FF8000;
  width: 100%
}

<iframe id="my-iframe-id" src="http://temp.strictquirks.nl/daframe.html">
  ?</iframe>

这适用于所有现代浏览器。

【讨论】：

谢谢朋友！我通过使用 IFrame Resizer (github.com/davidjbradshaw/iframe-resizer) 来解决它，它实际上与您建议的几乎相同。

【解决方案2】：

从视觉上看，iframe 的宽度和高度是您想要的吗？听起来您的 Window.postMessage 方法没有设置高度。 300x150 像素是大多数浏览器中 iframe 的默认计算大小。

【讨论】：

我认为 window.postMessage 不是问题，因为它发送了第一个参数中指定的值，并且可以。我通过硬编码任何其他值进行了测试并且进展顺利。但是，您的回答解释了“150px”的来源......谢谢，我支持你！