页面加载时未触发调整大小事件

Question

window.addEventListener('resize', function(){
    if (document.documentElement.clientWidth < 500) {
        // My Code.
    }
}, false);

仅当页面加载后我更改clientWidth（例如，调整浏览器窗口的大小）时，“ my Code”才有效，即使从一开始clientWidth条件为true。

我的目标是，如果clientWidth条件为true，则触发“我的代码”，两者都：1）如果在加载后clientWidth发生更改（浏览器调整大小）2）在加载页面时

Answer 1

您可以尝试以下方法：

function myFunction() {
    if ($(window).width() < 500) {
        alert('<500')
    }
}

$(document).ready(function(e) {
    myFunction();
});

$(window).resize(function(e) {
   myFunction();
});

请注意， resize事件处理程序并将其触发，因此在准备好文档时会触发该操作。

Answer 2

您可以使用dispatchEvent触发事件。 另请注意，事件名称为“调整大小”。 我没有使用jQuery，因为您的原始帖子未包含任何jQuery代码。

 setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 3000); var called = 1; window.addEventListener('resize', function(){ // if (document.documentElement.clientWidth < 500) { //this demo is to show the resize is getting called document.getElementById('logger').innerHTML = 'resize called ' + called++; // } }, false); 

 <div id="logger"></div> 

参考： https : //developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events

Answer 3

只需将代码包装在一个函数中，在页面初始化期间以及每次事件运行时调用一次（ resize/resizing ）

function checkWidth( width ) {
  if ( document.documentElement.clientWidth < width ) {

    // my code

  }
}

checkWidth( 500 );

window.addEventListener('resize', function(){
  checkWidth( 500 );
}, false );

基本上正是@nem评论的内容:)