Javascript IE9/10/11/Firefox中的iFramed页面在页面大小更改时不更新document.scrollHeight？_Javascript_Html_Css_Iframe

Javascript IE9/10/11/Firefox中的iFramed页面在页面大小更改时不更新document.scrollHeight？

javascript html css iframe

Javascript IE9/10/11/Firefox中的iFramed页面在页面大小更改时不更新document.scrollHeight？,javascript,html,css,iframe,Javascript,Html,Css,Iframe,我正在尝试使用PostMessageAPI将我的页面高度从iframe发送到父页面。其思想是，当iframed页面的总页面高度发生变化时，它会将该高度发送给父级。然后，父对象将调整iframe的高度以匹配。我目前在最新的Google Chrome上有一个很好的工作环境不幸的是，我在IE9/10/11和Firefox上遇到了麻烦。一旦.scrollHeight设置为其最大值，它将保持不变。尝试发送较小的高度只会发送以前的最高高度，即使原始页面的高度要小得多我认为这可能是因为页面所在的ifram

我正在尝试使用PostMessageAPI将我的页面高度从iframe发送到父页面。其思想是，当iframed页面的总页面高度发生变化时，它会将该高度发送给父级。然后，父对象将调整iframe的高度以匹配。我目前在最新的Google Chrome上有一个很好的工作环境

不幸的是，我在IE9/10/11和Firefox上遇到了麻烦。一旦.scrollHeight设置为其最大值，它将保持不变。尝试发送较小的高度只会发送以前的最高高度，即使原始页面的高度要小得多

我认为这可能是因为页面所在的iframe影响了原始页面的高度。那么这实际上可能有一个CSS相关的解决方案

这里是一个简化的测试用例。这个父页面包含一个iframe，它保存一个页面，该页面可以使用我添加的两个按钮增加和减少其自身的高度。此外，第三个按钮获取页面高度，并使用PostMessageAPI将其发送给父级

示例页面：

我这样做是为了在控制台中记录发送和接收的高度。通过添加橙色块并发送文档高度来测试功能。然后隐藏橙色块并再次发送高度。在最新的Chrome中效果很好，在IE和FF中效果不太好

任何帮助都将不胜感激

编辑：我已确定，如果使用除

和

之外的任何元素的高度，我可以避免此问题。例如，报告

的高度将给出一个准确的数字，而与浏览器无关

和

似乎报告了IE和Firefox中的完整iframe高度，即使其中的内容没有占据那么多空间

然而，如果我能得到准确的

或

高度，而不是使用

的话，我还是更愿意这样做。有趣的是，这种行为可能是“正确的”行为

scrollHeight属性必须返回运行这些命令的结果步骤：

“视口高度”是视口的高度，不包括滚动条的高度（如果有），如果没有视口，则为零

如果元素是根元素且文档未处于怪癖模式，则返回max（视口滚动区域高度，视口高度）

如果元素是HTML主体元素，则文档处于quirks模式，并且该元素没有关联的滚动框，则返回最大值（视口滚动区域高度、视口高度）

如果元素没有任何关联的CSS布局框，则返回零并终止这些步骤。 5.返回元素滚动区域的高度

参考：

根据并似乎给出了标准模式下所需的值。

有趣的是，这种行为可能是“正确”的行为

scrollHeight属性必须返回运行这些命令的结果步骤：

“视口高度”是视口的高度，不包括滚动条的高度（如果有），如果没有视口，则为零

如果元素是根元素且文档未处于怪癖模式，则返回max（视口滚动区域高度，视口高度）

如果元素是HTML主体元素，则文档处于quirks模式，并且该元素没有关联的滚动框，则返回最大值（视口滚动区域高度、视口高度）

如果元素没有任何关联的CSS布局框，则返回零并终止这些步骤。 5.返回元素滚动区域的高度

参考：

根据并似乎给出了标准模式下所需的值。

我在IE11和Firefox 29中测试了这一点。当我将

class=“global embed”

从iFrame中的head元素移动到body元素时，它可以完美地工作

<html id="global-embed" lang="en">
<body class="global-embed">

我在IE11和Firefox 29中对此进行了测试。当我将

class=“global embed”

从iFrame中的head元素移动到body元素时，它可以完美地工作

<html id="global-embed" lang="en">
<body class="global-embed">

我相信IE/FF为您提供了正确的行为，因为显式地将元素高度设置为大于内容高度的值会使滚动高度等于该值

您应该使用

远视

：

function postit() {
  parent.postMessage(document.getElementsByClassName("global-embed")[0].offsetHeight,"http://iaviglobal.com");
  console.log("iframe sent this height: " + document.getElementsByClassName("global-embed")[0].offsetHeight);
};

这是一本书

更新

在IE9/10

html

中，元素继承了

iframe

高度，但使用

body

元素却可以按预期工作：

//http://stackoverflow.com/a/17907562/328072
function getInternetExplorerVersion()
{
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}
function postit() {
  var elm = document.getElementsByClassName("global-embed")[0];
  var ie  = getInternetExplorerVersion();
  var h   = ie == -1 || ie >= 11 ? elm.offsetHeight : document.body.scrollHeight;     
  parent.postMessage(h,"http://iaviglobal.com");
  console.log("iframe sent this height: " + h);
};

更新了工作示例。

我认为IE/FF为您提供了正确的行为，因为显式地将元素高度设置为大于内容高度的值会使滚动高度等于该值

您应该使用

远视

：

function postit() {
  parent.postMessage(document.getElementsByClassName("global-embed")[0].offsetHeight,"http://iaviglobal.com");
  console.log("iframe sent this height: " + document.getElementsByClassName("global-embed")[0].offsetHeight);
};

这是一本书

更新

在IE9/10

html

中，元素继承了

iframe

高度，但使用

body

元素却可以按预期工作：

//http://stackoverflow.com/a/17907562/328072
function getInternetExplorerVersion()
{
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}
function postit() {
  var elm = document.getElementsByClassName("global-embed")[0];
  var ie  = getInternetExplorerVersion();
  var h   = ie == -1 || ie >= 11 ? elm.offsetHeight : document.body.scrollHeight;     
  parent.postMessage(h,"http://iaviglobal.com");
  console.log("iframe sent this height: " + h);
};

更新了工作示例。

感谢您的回复。我可以确认

body.clientHeight

和

body.offsetHeight

在标准模式下都返回准确的数字。有趣的是，我刚刚发现。如果我引用

标记，scrollHeight也可以在IE/FF中工作。只是

标记没有按预期工作

.clientHeight

、

.offsetHeight

和

.scrollHeight

都只在IE/FF中的

标记上显示滑稽动作。Chrome不在乎我是否使用

标签来抓取高度，它的工作原理与其他标签一样。谢谢你的回复。我可以证实这一点