可见窗口高度而不是 $(window).height();答案

【问题标题】：Visible window height instead of $(window).height();可见窗口高度而不是 $(window).height();
【发布时间】：2011-08-10 09:22:04
【问题描述】：

有什么方法可以从iframe 内部获取整个页面的可见高度，$(window).height() 给了我iframes 的高度？

【问题讨论】：

“可见高度”是什么意思？ $(window).height() 为您提供视图窗格的高度。
$(window).height() 因为它是跨浏览器的，所以效果更好。即，您的答案更好:)。
我需要浏览器的可见高度，而不是文档的高度。我有一个iframe，它的高度设置为3500px，如果我尝试得到$(window).height();，它只会给我3500px；

标签： javascript jquery

【解决方案1】：

如果您使用框架，您可以在 jQuery 构造函数中使用window.top 获取最外层窗口的高度。 window.top的高度会得到浏览器窗口的高度。

$(window.top).height();

编辑：随着 Mozilla 移动他们的文档，更新了 window.top 参考。

【讨论】：

注意 - 如果框架位于两个不同的域中，这将不起作用，例如 Facebook 应用程序。
在 chrome 开发者工具控制台的 result 框架内运行 window.top.innerWidth 时，似乎也无法在 jsFiddle 中工作：Uncaught DOMException: Blocked a frame with origin "https://fiddle.jshell.net" from accessing a cross-origin frame。我想top 窗口位于域https://jsfiddle.net。

【解决方案2】：

我一直用这个implementation

window.innerHeight or document.body.clientHeight or document.documentElement.clientHeight 取决于浏览器。

但我不明白为什么 jquery 的 $(window).height() 不适用于您的可见高度？

【讨论】：

这是因为我在 Facebook 应用程序的 iFrame 中使用它。 iFrameit self if 3500px 高度，但我只想知道用户窗口高度。
这些都不起作用。它给了我iFrame 的高度，而不是浏览器可见区域的高度。
因为您在 iframe 中。 window 对象只会引用您的页面。父页面将具有不同的窗口对象。而且我认为跨域问题会阻止您访问数据:(。一定有一种方法 facebook 给你的总高度没有？

【解决方案3】：

我今天有理由解决一个类似的问题，因为在 FF 中 screen.height 和 window.innerHeight 返回相同的值，当然我的第一反应是检查 SO 上的解决方案。最后这就是我解决这个问题的方式，我在这里发布冗长的版本仅供后代使用......

function visibleWindowHeight( callback ) {
    /* create temporary element 'tmp' */
    var vpHeight,
        tmp = document.createElement('div');

    tmp.id = "vp_height_px";

    /* tmp height = viewport height (100vh) */
    tmp.setAttribute("style", "position:absolute;" +
        "top:0;" +
        "left:-1px;" +
        "width:1px;" +
        "height:100vh;");

    /* add tmp to page */
    document.body.appendChild(tmp);

    /* get tmp height in px */
    vpHeight = document.getElementById("vp_height_px").clientHeight;

    /* clean up */
    document.body.removeChild(tmp);

    /* pass value to callback and continue */
    callback( vpHeight );
}

document.addEventListener('DOMContentLoaded', function() {

    visibleWindowHeight( function( visibleHeight ) {

        console.log("visibleHeight:", visibleHeight);
        /*
            ... continue etc etc  ...
        */
    });

}, !1);

有时它可能会帮助某人。 ?

【讨论】：