windows 检测浏览器窗口是否使用 JavaScript 移动?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4319487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-15 15:42:47  来源:igfitidea点击:

Detecting if the browser window is moved with JavaScript?

javascriptwindowsbrowserdom-events

提问by Oscar Godson

This is for a demo... and i was just curious, can you detect if the window has been moved? Like if you move Firefox/Chrome/IE around your monitor? I doubt it, but I wanted to see since you can check for resize and focus/blurred windows.

这是一个演示......我只是好奇,你能检测到窗口是否被移动了吗?就像您在显示器周围移动 Firefox/Chrome/IE 一样?我对此表示怀疑,但我想看看,因为您可以检查调整大小和聚焦/模糊的窗口。

回答by Harmen

I can only think of this (heavy) work-around, where you check if window.screenXand window.screenYhave changed every x milliseconds

我只能想到这个(重)的变通,你是否window.screenXwindow.screenY已改为每x毫秒

var oldX = window.screenX,
    oldY = window.screenY;

var interval = setInterval(function(){
  if(oldX != window.screenX || oldY != window.screenY){
    console.log('moved!');
  } else {
    console.log('not moved!');
  }

  oldX = window.screenX;
  oldY = window.screenY;
}, 500);

Though I would not recommend this -- it might be slow and I'm not sure if screenX and screenY are supported by all browsers

虽然我不推荐这个——它可能很慢而且我不确定 screenX 和 screenY 是否被所有浏览器支持

回答by marksyzm

A potentially more optimised version of this is to only check for window movement when outside of the window combined with Harmen's answer:

一个可能更优化的版本是仅在窗口外结合 Harmen 的回答时检查窗口移动:

var interval;
window.addEventListener("mouseout", function(evt){ 
  if (evt.toElement === null && evt.relatedTarget === null) {
    //if outside the window...
    if (console) console.log("out");
    interval = setInterval(function () {
      //do something with evt.screenX/evt.screenY
    }, 250);
  } else {
    //if inside the window...
    if (console) console.log("in");
    clearInterval(interval);
  }
});

If using jQuery, it may normalise screenX/Y in this case so it's worth running a few tests on that. Jquery would use this format instead of addEventListener:

如果使用 jQuery,在这种情况下它可能会标准化 screenX/Y,因此值得对其进行一些测试。Jquery 将使用这种格式而不是addEventListener

$(window).on('mouseout', function () {});

If you are moving the window in Windows OS via alt+ Space, and find that windows resizes are ignored, I would recommend adding an extra level of detection via keypressevents.

如果您通过alt+在 Windows 操作系统中移动窗口Space,并发现窗口调整大小被忽略,我建议通过keypress事件添加额外的检测级别。

回答by David G

Re the first answer: I use the 'poll window position' in production code. It's a very lightweight thing to do. Asking for a couple of object properties twice a second is not going to slow anything down. Cross-browser window position is given by:

关于第一个答案:我在生产代码中使用了“轮询窗口位置”。这是一件非常轻量级的事情。每秒两次请求几个对象属性不会减慢任何速度。跨浏览器窗口位置由下式给出:

function get_window_x_pos()
{
   var winx;

   if(window.screenX)
      winx=window.screenX;
   else if(window.screenLeft)
      winx=window.screenLeft;

   return winx;
}

and similarly for vertical position. In my code I use this to fire an AJAX event off to the server to store position and size of the window so next time it will open where it was the last time (I'm probably moving to HTML5 local storage soon.) One little wrinkle you might want to cover is not generating spurious updates while the window is being dragged. The way to handle this is to register when the window has been moved for the first time and only trigger an update when two subsequent polls of window position return the same value. A further complication is for windows which allow resizing from all sides. If the left or top side are dragged, the DOM will give you a resize event, but the nominal window position will have altered as well.

和垂直位置类似。在我的代码中,我使用它向服务器发送 AJAX 事件以存储窗口的位置和大小,以便下次它会在上次打开的位置打开(我可能很快就会转移到 HTML5 本地存储。)一点在拖动窗口时,您可能想要覆盖的皱纹不会产生虚假更新。处理这种情况的方法是在第一次移动窗口时进行注册,并且仅在窗口位置的两次后续轮询返回相同值时才触发更新。另一个复杂的问题是允许从各个方向调整大小的窗口。如果拖动左侧或顶部,DOM 会给你一个调整大小事件,但名义窗口位置也会改变。

回答by Josiah Ruddell

No. This is not something that the DOM is aware of.

不。这不是 DOM 知道的。

回答by Qix - MONICA WAS MISTREATED

Unfortunately not. The DOM is only notified about window sizes, cursor positions, "focus" and "blur", etc; anything that affects drawing. Since moving a window doesn't necessarily require any of the contents to be "redrawn" (in a Javascript/Html engine sort of sense), the DOM, therefore, doesn't need to know about it.

不幸的是没有。DOM 只通知窗口大小、光标位置、“焦点”和“模糊”等;任何影响绘图的东西。由于移动窗口不一定需要“重绘”任何内容(在 Javascript/Html 引擎的意义上),因此 DOM 不需要知道它。

回答by cambraca

Sadly, no. Although I did find this pagethat claims there is such a thing. I tested that in IE, Chrome, and FireFox, no luck.

可悲的是没有。虽然我确实发现这个页面声称有这样的事情。我在 IE、Chrome 和 FireFox 中对此进行了测试,但不走运。