Question

我发现并使用了以下stackoverflow问题并回答here。我正在使用iFrame内部的iFrame引用回父域，以便将我的身高传回给它。我完全理解这个概念并且相当容易实现。问题是，当我尝试从jQuery中获取$（document）.height（）时，或者只是通过document.body.scrollHeight，当我的页面在iFrame中被引用时，我在所有浏览器中都看到了奇怪的结果。

以下是我页面上发生的事情的背景知识。我正在做一些ajax调用来搜索第三方提供商的服务，并根据结果，非常标准的东西在我的页面内生成html。顺便说一句，我正在等待我的html被添加到DOM中，然后才能获取文档的高度。以下是当我的页面位于iFrame内时$（document）.height（）的结果。

FireFox 10.0.2，拾取的高度几乎比文档的实际高度小1000像素或更多。

Google Chrome 18.0.1025.162大部分时间都会选择正确的高度。有时高度只有几百个像素。

Safari 5的行为与FireFox一样。

我见过很多博客文章，其中包含显示行为的代码。如果我使用jQuery或javascript文档对象可用的内容并不重要。我总是看到其中任何一个电话回来的结果不一致。我不得不相信使用这种技术的其他人已经参与其中。

我不需要显示iFrame resize或helper iFrame的代码，因为它们按预期运行。我要展示的主要代码是在ajax事件和dom操作完成后，如何从搜索表单开始调整大小过程：

function resizeMe() {
    var iFrameHelper = $("#iFrameHelper");
    iFrameHelper.attr("src", iFrameHelper.attr("data-url") + "?height=" + $(document).height() + "&cacheb=" + Math.random());
}

Answer 1

所以我最终搞清楚问题是什么。 $（document）.height（）一块正常工作。问题在于时机问题。在ajax调用完成后，我在页面中呈现的项目包含导致请求从页面中出来以获取图像的图像。在图像上没有设置默认高度，因此在我更改页面内部的iFrame上的src属性之前未正确计算高度，这启动了父级的调整大小。

我最终做的只是默认所有图像的高度，因为它们共享相同的尺寸。我责怪iFrames而不是我自己。因为这么简单的原因，把头发拉了2天。

我希望将来可以帮助其他人。

获取跨域iFrame内部文档的高度

1 个答案: