调整到 0 高度时未触发调整大小事件？答案

【问题标题】：Resize event not triggered when resizing to 0 height?调整到 0 高度时未触发调整大小事件？
【发布时间】：2018-10-01 00:11:00
【问题描述】：

当我遇到一个奇怪的问题时，我目前正在查看调整大小的功能。当我将窗口调整到最小高度时（仅显示顶部窗口栏并在其上最小化并关闭）没有触发 javascript 事件。

我可以看到它在所有其他高度和宽度下工作，但在调整到最小高度时不会触发任何事件。我还尝试记录文档正文并检查它此时没有为空，它不是......

注意事项：

我正在使用最新的 Google Chrome (v66)。 windows 10（怀疑这真的很相关，除非有人使用 mac 等说它在他们的 chrome 版本中工作）

对上述内容的更新：我注意到我的原始解决方案适用于 mac（最新版本 66）中的 chrome，但在 Windows 上的 chrome（最新版本 66）中没有发生任何事件。

这只是 javascript，我不明白为什么当高度为 0 时没有触发事件（68 是我能够调整到的最小高度，事件仍然触发，之后只有顶部工具栏可见） .

我有一个小的 html 测试可以在下面尝试看看我在说什么 - 或者无论如何创建一个演示会非常简单。

<!DOCTYPE html>
<html>
<body>

<p>Open a new window, and resize the width and height of the new window.</p>

<button onclick="openWin()">Create window</button>
<button onclick="resizeWinTo()">Resize the window to 800px * 600px</button>
<button onclick="resizeWinBy()">Make the new window smaller</button>

<script>
var myWindow;

function openWin() {
   myWindow = window.open("", "", "width=250, height=250");
   myWindow.onresize = function (event) { 
       console.log(myWindow.outerHeight);
       console.log(myWindow.outerWidth);
   };
}

function resizeWinTo() {
   myWindow.resizeTo(800, 600);
   myWindow.focus();
}

function resizeWinBy() {
   myWindow.resizeBy(-100, -50);
   myWindow.focus();
}
</script>

</body>
</html>

有什么建议可以发送给我以获取更多信息，例如 windows 的 chrome 开发人员？

【问题讨论】：

标签： javascript html google-chrome dom dom-events

【解决方案1】：

为什么高度为0时没有触发事件？

这是因为您已达到窗口的最小外部高度（68，这是您的情况下标题/顶部栏的高度），您不能低于最小外部高度。

如果你想获得内容的高度。你应该使用 innerHeight 而不是 outerHeight

为了改变

console.log(myWindow.outerHeight);

到

console.log(myWindow.innerHeight);

因为 outerHeight 在您的情况下正在考虑标题/顶栏的高度。

引用MDN Docs

outerHeight : 获取浏览器窗口外部的高度。

innerHeight : 获取浏览器窗口外部的宽度。

【讨论】：

不，我的意图是使用 outerHeight，因为这是使用 resizeTo() 方法时设置的值。你忽略了这个问题，我的问题是调整大小的事件甚至没有从 javascript 中触发——这意味着我没有得到控制台日志。内部和外部都是有效的 - 我自己需要使用外部尺寸版本意味着我可以在不知道用户工具栏等的情况下更好地处理尺寸。
我更新了答案，回答为什么没有日志。
嗨@user158，感谢您的更新。您能告诉我您使用的是哪种浏览器和操作系统吗？我注意到我的原始解决方案适用于 mac（最新版本 66）中的 chrome，但在 Windows 上的 chrome（最新版本 66）中没有发生任何事件。
我正在使用 Linux Mint 18.3 和 Chrome 版本 66.0.3359.117（官方构建）（64 位）
@Im-Harrison 我的观察：在 Linux 上最小（地址栏 + 顶部栏）内部高度：1，内部宽度：110，外部宽度：29，外部高度：110 在 Windows 8 上 Chrome 至少 66 （地址栏+顶栏）外部高度：68，外部宽度：140，内部高度：1，内部宽度：124

【解决方案2】：

也许您可以通过检查是否达到新窗口的限制来在新窗口上调度事件“调整大小”。

当您不需要调整窗口大小时，“Chrome”可能不会调整大小。

检查下面的代码，也许对你有帮助。

<!DOCTYPE html>
<html>
    <body>

        <p>Open a new window, and resize the width and height of the new window.</p>

        <button onclick="openWin()">Create window</button>
        <button onclick="resizeWinTo()">Resize the window to 800px * 600px</button>
        <button onclick="resizeWinBy()">Make the new window smaller</button>

        <script>
            var myWindow;

            function openWin() {
                myWindow = window.open("", "", "width=250, height=250");
                myWindow.resizeBy = function (deltaX, deltaY) {
                    var X = parseInt(myWindow.innerWidth) + parseInt(deltaX)
                            , Y = parseInt(myWindow.innerHeight) + parseInt(deltaY);
                    myWindow.resizeTo(X > 0 ? X : 0, Y > 0 ? Y : 0);
                    myWindow.focus();
                };
                myWindow.onresize = function (event) {
                    console.log('outerHeight -> ' + myWindow.outerHeight);
                    console.log('outerWidth -> ' + myWindow.outerWidth);
                };
            }

            function resizeWinTo() {
                myWindow.resizeTo(800, 600);
                myWindow.focus();
            }

            function resizeWinBy() {
                var prevValY = myWindow.outerHeight
                    , prevValX = myWindow.outerWidth
                    , deltaX = -100
                    , deltaY = -50;
                myWindow.resizeBy(deltaX, deltaY);
                if ((prevValX == myWindow.outerWidth || (myWindow.outerWidth - prevValX) > deltaX)
                        && (prevValY == myWindow.outerHeight || myWindow.outerHeight == 0)) {
                    myWindow.dispatchEvent(new Event('resize'));
                }
                myWindow.focus();
            }
        </script>

    </body>
</html>

【讨论】：

我对此进行了研究并对其进行了测试 - 不幸的是它没有任何区别。一旦将高度拖到最小值，就不会创建控制台日志，因为事件还没有被触发。对我来说似乎是一个奇怪的问题。感谢您的尝试