Question

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

我可以看到它适用于所有其他高度和宽度，但在调整到最小高度时不会触发任何事件。我alos试图记录文档正文并检查它是否在这一点上没有结果，它不是......

注意：

我最近使用谷歌浏览器（v66）。   Windows 10（怀疑这是非常相关的，除非有人使用mac等表示它正在使用他们的chrome版本）

更新到上面的内容：我注意到我的原始解决方案适用于mac中的chrome（最新版本66），但在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开发人员吗？

Answer 1

为什么在高度为0时不会触发事件？

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

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

为了改变

console.log(myWindow.outerHeight);

到

console.log(myWindow.innerHeight);

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

引自MDN Docs

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

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

Answer 2

也许您可以通过检查是否达到新窗口的限制来在新窗口上调度事件'resize'。

当您不需要调整窗口大小时，“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>

调整大小到0高度时未调整大小事件？

2 个答案: