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

试图创建一个“hello world”警报，只要浏览器窗口点击1200px就会触发该警报。仅在特定窗口大小执行功能

示例：滚动1220至1100年像素：事件触发一次在1200 示例：滚动一一○○年至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"); 
     } 
    }

来源

2016-01-22 newneub

'window.innerWidth'是只读的......修正之后，很可能在您读取该值时，它不是1199.您需要一个空白。 – Teemu

在if语句中使用'==' – rosscj2533

@ rosscj2533其实，在javascript中不是'==='？ –

resize事件不会像您想的那样频繁触发，以便在用户调整大小时可靠地识别出确实宽度为1199的窗口。

例如

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作为视口的代理，但您需要确保填充视口但不超过它。

来源

2016-01-22 21:45:16 mczepiel

谢谢！这很漂亮。 – newneub

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

来源

2016-01-22 21:40:03

'window.innerWidth> 1199'会更有意义吗？ – Teemu

试试这个

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; 
    }

}

来源

2016-01-22 21:59:16

在comment你说，这刷新后调整大小正常。为了达到这个目的，你需要一个去抖动器。 Debouncer是一个函数，它检查一个事件是否在给定的延迟后未被触发，然后才会触发事件处理程序。像这样：

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块返回。

你也可以在去抖动器（在clearTimeout之后）检测到“跨越边界”，这样它会更加实时，但可能有几个像素的间隙。

我在这里使用的去抖动器起源于BGerrissen's great answer at SO。

来源

2016-01-22 22:50:57 Teemu

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

回答

相关问题