检测浏览器窗口是否随JavaScript移动？

Question

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

Answer 1

我只能想到这个(重)的变通,在那里你检查的window.screenX,并window.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);

虽然我不推荐这个 - 它可能很慢,但我不确定所有浏览器是否支持screenX和screenY

Answer 2

一个可能更优化的版本是仅在窗外结合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);
  }
});

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

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

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

Answer 3

重新回答第一个答案：我在生产代码中使用“投票窗口位置”。这是一件非常轻巧的事情。每秒两次请求几个对象属性不会降低任何速度。跨浏览器窗口的位置由下式给出：

function get_window_x_pos()
{
   var winx;

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

   return winx;
}

垂直位置也是如此。在我的代码中，我使用它向服务器触发AJAX事件，以存储窗口的位置和大小，因此下一次它将在上次打开的位置打开（我可能很快就会移至HTML5本地存储。）拖动窗口时，您可能想覆盖的皱纹不会生成虚假更新。处理此问题的方法是在第一次移动窗口时进行注册，并且仅在随后的两次窗口位置轮询返回相同值时才触发更新。窗户的另一种复杂之处是允许从各个方面调整大小。如果拖动左侧或顶部，则DOM将为您提供一个调整大小事件，但标称窗口位置也将发生变化。