gpt4 book ai didi

Javascript,一种跨平台方式,用于处理仅发生的调整大小事件

转载 作者:行者123 更新时间:2023-12-02 23:28:36 25 4
gpt4 key购买 nike

我想在当前窗口的大小发生变化时执行一个函数。

我有这个非常简单的代码:(foo.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
<script>
function resize() {alert("FOO");}
window.onresize = resize;
</script>
</html>

在 Firefox Quantum v60.4(桌面版)上,这段代码非常有效。当我调整 Firefox 窗口大小时,会显示警报。当我只加载页面“foo.html”时,不会出现警报“FOO”。

但是:

  • 在 Chrome v71.0.3578(桌面版)上,当我调整窗口大小时,警报会出现两次。

  • 最糟糕的是,在我的 Android 智能手机(使用 Firefox v67.0.2)上,当我加载页面时会出现警报(我不调整页面大小,只是加载)

当我在智能手机上调整窗口大小或从纵向模式切换到横向模式时,是否有一种方法可以仅处理一次调整窗口大小事件?

感谢您的帮助!

编辑:

使用此代码,我可以防止 Chrome 两次触发:

var resizeTimer;
window.onresize = function(){
if (resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function(){
alert("FOO");
}, 50);
};

但在 Firefox (Android) 上,我仍然遇到同样的问题。当我加载页面时,会显示警报“FOO”。 (在智能手机上,我只想在用户从纵向模式切换到横向模式时执行我的代码)

最佳答案

为什么不拥有这样的东西呢?

var CurrentWindowSize = {  w: document.body.clientWidth,  h: document.body.clientHeight }; // only Chrome has correct values here

window.onresize = function(e)
{
let width = e.target.outerWidth
, height = e.target.outerHeight
;
if (width != CurrentWindowSize.w
|| height != CurrentWindowSize.h)
{
CurrentWindowSize.w = width;
CurrentWindowSize.h = height;
WindowIsResized();
}
}

function WindowIsResized() {
// your stuff...
}

关于Javascript,一种跨平台方式,用于处理仅发生的调整大小事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56615439/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com