Question

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

“我的代码”生效仅如果我在页面加载后更改clientWidth（例如调整大小浏览器窗口），即使clientWidth条件为true也是如此从一开始。

如果clientWidth条件为真，我的目标是触发“我的代码”，两者：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/en-US/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评论的内容：）

在加载页面时调整事件的大小

3 个答案: