Chrome 中的 jQuery 加载事件在弹出窗口中返回宽度/高度值为零答案

【问题标题】：jQuery load event in Chrome returns width/height values of zero in a popupChrome 中的 jQuery 加载事件在弹出窗口中返回宽度/高度值为零
【发布时间】：2011-11-09 00:26:49
【问题描述】：

使用 window.open 从主页面创建一个弹出窗口，子/弹出页面使用 onload 事件，该事件应该显示它的宽度/高度。然而，在 Chrome 中，这将始终导致 0。检查窗口和文档的宽度/高度（使用或不使用 jQuery）只会返回 0。奇怪的是，在选项卡中加载子页面本身总是会正确报告宽度/高度。

这是正确的行为吗？加载事件有问题吗？与铬？我可以等待另一个事件来确保特别设置宽度/高度属性吗？

如果在 onload 中设置了超时，您可能会得到正确的值。但这似乎只是一个关于在检查宽度/高度之前等待多长时间的猜谜游戏。有没有办法等待特定事件确定子窗口的宽度/高度在 Chrome 中设置？

下面两个页面的快速演示。希望有人可能有一些解决方案，这不涉及猜测不确定的时间投入 setTimeout。

编辑：忘了说，我已经在 Chrome 版本 14/15 上测试过了。

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title>main</title>
    </head>
    <body>
        <input type="button" value="Pop" onclick="window.open('http://localhost:8085/social_test/test.html', 'namedWnd', 'width=320,height=240')" />
    </body>
</html>

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title>test</title>
        <script type="text/javascript" src="jquery-1.6.4.js"></script>
        <script type="text/javascript">
            $(window).load(function(){
                var report = function() {
                    alert($(window).width() + " x " + $(window).height());
                };
                report();
                //window.setTimeout(report, 1000);
            });
            // without any jquery
            /*window.onload = function() {
                var report = function() {
                    alert(window.innerWidth + " x " + window.innerHeight);
                    // or document's size
                    //alert(window.document.documentElement.clientWidth
                    //  + " x " + window.document.documentElement.clientHeight);
                };
                report();
                //window.setTimeout(report, 1000);
            };*/
        </script>
    </head>
    <body/>
</html>

【问题讨论】：

如果在正文中添加一些内容呢？
您的代码在 Chrome 16 中对我来说基本上是按原样工作的——显示正确的尺寸。
只要我检查文档的宽度/高度，这实际上似乎有效。
@Nicholi -- 实际上从头开始，我认为现在有一个问题。也许是一个 jquery 错误，但不确定。
@david 是否仅在您第一次打开弹出窗口时起作用？然后停止？我认为 roberkules 在这里一针见血。如果我在文档正文中放一些东西并检查 $(document).width()/height() 似乎没问题。至少在 Chrome 14/15 中。

标签： javascript jquery google-chrome cross-browser popup

【解决方案1】：

你为什么不使用 $(document) 而不是 $(window) ：http://api.jquery.com/height/

我自己在一个流行应用程序中使用过它，它可以正常工作，没有超时或任何东西

【讨论】：

刚才用 $(document) 再次尝试，它似乎不确定地返回正确的值。如果我继续打开弹出窗口（关闭后），它将停止报告正确的值。也只是想知道，您使用的是哪个版本的 Chrome？
刚刚意识到，由于我的文档正文确实是空的，显然它只会报告 0。在中添加一些东西，我似乎总是得到可重复的答案。谢谢。
@Nicholi -- 为什么 $(window) 显然应该返回 0？来自 jQuery 文档：“$(window).height(); // 返回浏览器视口的高度” 浏览器视口大小不应受其内部内容的影响。
是的，大卫说的是真的，但是我注意到弹出窗口有不同的规定，这真的很烦人
@david 我指的是检查 $(document).width/height。不是$（窗口）。我在示例中的文档正文是空的，向其中添加一些内容，然后 $(document).width/height 返回实际值。为什么 $(window) 根本不起作用（没有超时），我不知道。

【解决方案2】：

使用$(document) 代替$(window) 可能并不总是正确的

解决方法：大家有（这样的）jQuery问题都应该直接指向，仔细检查DTD是否真的指向下面的DTD http://www.w3.org/TR/html4/loose.dtd

参考：http://bugs.jquery.com/ticket/12426

【讨论】：

将不得不再次检查此问题现在的状态。尽管许多不同的人指出我的问题（大部分）通过简单地添加到文档正文中来解决。

【解决方案3】：

试试：

$(document).load(function(){
    function report() {
        alert($(window).width() + " x " + $(window).height());
    };
    report();
});

【讨论】：

我实际上已经尝试过，该事件似乎根本没有触发。文档可以有加载事件吗？
$(document).ready 或 $(document).load 是哪个？我认为等待加载完整的窗口会比任何准备好的事件（窗口或文档）更明智。由于问题似乎正在等待 Chrome 完成它正在做的事情（setTimeouts）。 $(document).ready 使用 $(window).width/height 函数无论如何都不起作用。