我正在从事一个网络元素，该元素需要将另一个网络显示到 iframe 中。我阅读了 POSTMESSAGE javascript 方法，以便告诉页面容器(具有 <iframe> 标记的容器)iframe 中使用的页面高度。
问题很简单。当我在新标签页(将在 iframe 中加载的标签页)加载“内部页面”时，我尝试获取文档的高度，然后我得到“380”作为值，这我认为是正确的，但未加载到 iframe 中。
另一方面，当我尝试从“容器页面”(具有 iframe 标记的页面)呈现 iframe 并检查同一脚本(在“内部页面”中运行)中发生的情况时，我始终获得 150px 的值。 见下图:
我真的不知道这个值是从哪里来的，但是当您将它放在 iframe 中时，我无法弄清楚如何获得正确的值。
我做错了什么？有什么想法吗？
编辑
我忘了说我是基于以下 URL 使用这种方法的: http://michilehr.de/resize-iframe-by-its-content-cross-domain/
最佳答案
您帖子中解释 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>这将适用于所有现代浏览器。
关于javascript - 无法从 JavaScript 的 iframe 中使用的内部页面获取正确的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39515038/