Question

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

问题很简单。当我加载＆＃34;内部页面＆＃34; 在新标签（将在iframe中加载的那个），我尝试获取文档的高度然后我得到＆＃34; 380＆＃34;作为值，我认为是没有在iframe中加载的正确值。

另一方面，当我尝试从＆＃34;容器页面＆＃34;渲染iframe时（具有iframe标签的那个）我检查在同一个脚本中发生的事情（运行在＆＃34;内部页面＆＃34;）并且我总是得到150px的值。见下图：

我真的不知道这个价值来自何处，但我无法弄清楚如何在将其放入iframe时获得正确的价值。

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

修改

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

Answer 1

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

Answer 2

帖子中的链接，解释了postMessage事件的机制，几乎是正确的。它的示例代码适用于Firefox和IE，但不适用于Chrome。但实际上您需要做的就是用document.body.scrollHeight替换iframe源中的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>

和父页面

＆＃13;

// 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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

无法从JavaScript中的iframe中使用的内部页面获得适当的高度

修改

2 个答案: