僅在特定窗口大小執行功能

試圖創建一個「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

僅在特定窗口大小執行功能

回答

相關問題