Question

尝试创建一个＆＃34; hello world＆＃34;每当浏览器窗口达到1200px时触发警报。

示例：从1220滚动到1100像素：事件在1200时触发一次。示例：从1100滚动到1220像素：甚至在1200点亮一次。

任何帮助将不胜感激。

这是我一直在使用的（大部分）

window.onresize = function ()
    {
        if (window.innerWidth = 1199) {
           //alert ("The size of the window is 1199");
          location.reload();
          return;
        }

  }

这是清理过的代码。我不相信==或===在这种情况下有所作为

 window.onresize = function ()
    {
      if (window.innerWidth === 1199) {
         alert ("The size of the window is 1199");
      }
  }

Answer 1

为了在用户调整大小时可靠地识别确切宽度为1199的窗口，resize事件不会像您希望的那样经常触发。

e.g。

window.onresize = function() { console.log(window.innerWidth); }

查看粒度。

要考虑有损事件通知，您可以通过阈值检测任何调整大小。这仍然可能会错过一些在阈值附近调整大小，但应该调整大小调整的总体变化：

var thresholdWidth = 1199;
var previousWidth = window.innerWidth;
window.onresize = function() {

  var movedUpThroughThreshold = previousWidth < thresholdWidth &&
    window.innerWidth >= thresholdWidth;
  var movedDownThroughThreshold = previousWidth >= thresholdWidth &&
    window.innerWidth <= thresholdWidth;

  if (movedUpThroughThreshold || movedDownThroughThreshold) {
    console.log("passed threshold", previousWidth, "->", window.innerWidth)
  }

  previousWidth = window.innerWidth;
}

兼容性说明 如果您需要定位IE8，则需要考虑innerWidth可用性，并且虽然标准将innerWidth描述为视口宽度（包括滚动条），但各种用户代理可能存在皱纹。

如果innerWidth不可用，您可能需要使用documentElement或body作为视口的代理，但是您需要确保它们填充视口但不超过它。

Answer 2

尝试将window.innerWidth = 1199更改为window.innerWidth === 1199。我不知道这是否会有所帮助，但值得一试。

Answer 3

试试这个

window.onresize = function ()
{
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (w === 1199) {
       alert ("The size of the window is 1199");
      location.reload();
      return;
    }

}

Answer 4

在comment你说过，调整大小后刷新是可以的。要实现这一目标，你需要一个去抖动者。去抖动是一个函数，它检查一个事件在给定的延迟之后是否没有被触发，然后它才会触发你为该事件传递的事件处理程序。像这样：

var oldSide = window.innerWidth - 1200; // Stores positive value, if current size is greater than 1200, else zero or negative

// This is the debouncer, it delays the execution of the given handler untill user stops resizing
function debounce(fn, delay) {
   var delayId, delay = delay || 200;
   return function () {
      var scope = this, args = arguments;
      clearTimeout(delayId);
      delayId = setTimeout(function () {
          fn.apply(scope, Array.prototype.slice.call(args));
      }, delay);
   }
}

// Here we add the resize listener, notice, that we call the debouncer, and pass our actual handler to that
$(window).resize(debounce(function (e) {
    var newSide = window.innerWidth - 1200;
    // newSide * oldSide is negative, if 1200 is acrossed in either directions during the last resizing
    if (newSide * oldSide <= 0) {
        // Window size acrossed 1200 during the last resize, refresh the page
    }
    // Window size didn't across 1200 during the last resize, set a new value to oldSide, and keep listening
    oldSide = newSide;
}));

A working demo at jsFiddle（仅记录到控制台，不刷新）。

请注意，如果您在1200交叉时不打算实际刷新，则必须从if块返回。

你还可以检测＆＃34;边界和＃34;在debouncer中（在clearTimeout之后），这样会更实时，但可能会有几个像素的差距。

我在这里使用的辩护者来自BGerrissen's great answer at SO。

仅在特定窗口大小执行功能

4 个答案: