logo标签列表

jQuery $(window).height() 函数无法返回实际的窗口高度

javascriptjquerywindowheight
24
我有一个页面，需要在用户滚动到底部时动态加载ajax内容。问题是JQuery没有返回正确的窗口高度。我以前使用过这个函数，从来没有见过它失败，但出于某种原因，它会返回与文档高度相同的值。我在这里有测试页面：bangstyle.com/test-images 我已编写提示框，在页面加载时显示，并在用户向下滚动500像素时显示提示框。
function scroller() {

                        if($(window).scrollTop() > 500){

                        delay(function(){ //200ms wait
                                pagecounter++;
                                sideshow();
                                alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());

                                return false;
                            }, 200 );

                                    }
                            }

我之前尝试过发布这个问题，但是由于没有得到解决方案而将其删除。我希望可以在这里发布我的测试页面链接。顺便提一句，我已经在Mac Safari和Mac FF上测试过了。我在其他页面上运行相同的代码时，它可以正常工作。我感觉这个页面的DOM中可能有导致JS失败的问题，但不知道具体是什么。

你应该使用"Infinite Scrolling" JQuery插件来实现。这里有一些项目：http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/#.UHMd8vmorhU - sdespont
谢谢。我已经查看了那些内容，但我真的想自己弄清楚这个问题。如果我知道尺寸，我可以让它工作，但不知何故window.height()失败了，我真的真的很想明白为什么。这段代码在我使用它的其他页面上运行良好。 - Joel Joel Binks
测试了什么？你怎么知道窗口高度不正确？发布测试链接不仅可以，而且非常有用（并且向他人展示你已经尝试解决问题）；图片胜过千言万语，示例价值更高。 - Kato
Kato，当ajax内容加载时，我将获取与文档高度匹配的窗口高度值。例如，文档高度可能为2200px，而我获取的窗口高度值也与此相匹配，即使我的窗口高度小于1000px。在我发布的链接中，我设置了js警报，以便在页面加载和用户从顶部滚动超过500px时发出提示。http://www.bangstyle.com/test-images - Joel Joel Binks
7个回答
80

请查看您的HTML源代码。 第一行应该是<!DOCTYPE html>，而不是<style>标签。

所以看起来您的文档正在运行在怪异模式下，jQuery无法计算正确的窗口尺寸。

1
我会尝试一下，虽然doctype似乎会搞乱js尝试获取window.height。但是我会试一试。 - Joel Joel Binks
4
解决方案运行完美。我遇到了同样的问题，原因是DOCTYPE标签不正确。谢谢。 - DreamWave
1
您真是个救星，我已经花了最后两个小时尝试了每一个可能的解决方案，但就是想不明白为什么它对我不起作用。 - The Digital Ninja
对我来说，这一切都不起作用。我已经尝试了所有带有定义的文档类型的浏览器。 - Mark Löwe
@MarkLöwe，全局变量window.innerHeight的值与实际窗口高度相比如何？您能提供一个示例，以便我们可以重现您的问题吗？ - Inferpse
显示剩余2条评论
3
//works in chrome
$(window).bind('scroll', function(ev){

    //get the viewport height. i.e. this is the viewable browser window height
    var clientHeight = document.body.clientHeight,
        //height of the window/document. $(window).height() and $(document).height() also return this value.
        windowHeight = $(this).outerHeight(),
        //current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
        scrollY = $(this).scrollTop();

    if( windowHeight - clientHeight === scrollY ){
        console.log('bottom');
    }

});
3
我遇到了相同的问题，找到了一些解决方法：
1）当你尝试在文档完成渲染之前获取实际高度时，会出现问题； 2）如果没有使用正确的DOCTYPE（如上所述），在谷歌浏览器中会出现问题； 3）即使文档完全呈现，这个问题仍然会在谷歌浏览器中出现。
对于谷歌浏览器，我在这里找到了一个解决方法：get-document-height-cross-browser。我只在谷歌浏览器中使用这个解决方案，它解决了我的问题，我希望能帮助那些仍然有这个问题的人。
2

这是一个老问题，但我最近在IE10中遇到了几个像素的窗口高度不正确的问题。

我发现IE10默认应用了75％的缩放比例，这会影响窗口和文档的测量结果。

因此，如果您得到了错误的宽度或高度，请确保将缩放比例设置为100％。

0

由于jQuery（以及DOM）在怪异模式下无法正确计算大小，有两种解决方案：

  1. 在页面顶部添加doctype html（如“正确”答案中所述），或
  2. 如果第一种选项不可行，则使用window.innerHeight、window.innerWidth。

希望能对您有所帮助。

0
0

我将我的脚本从头移到页脚，这解决了我的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接