Question

当浏览器的大小调整为890px以上时，我试图使我的简单javascript函数（无jQuery）将消息记录到控制台。此代码在加载时有效，但仅在加载页面时说明起始宽度：

if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }

但是我下面使用window事件的代码不起作用：

if (window.attachEvent) {
  window.attachEvent('onresize', function() {
    if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }
})};

有人可以在这里解释我在做什么错吗？我对javascript比较陌生。感谢您的帮助。

Answer 1

window.addEventListener('resize', () => {
 if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }
});

Answer 2

onresize将用作html中的属性。例如<body onresize="resizePage()"></body>

正确的事件是resize。尝试关注

if (window.attachEvent) {
  window.attachEvent('resize', function() {
    if (window.innerWidth < 890) {
     console.log('Less than 890px');
    } else {
     console.log('890px or more');
    }
 })
}

请注意，您也可以考虑使用addEventListener。有关详细信息，请参阅其他答案here

Answer 3

尝试

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
        if (window.innerWidth < 890) {
         console.log('Less than 890px');
        } else {
         console.log('890px or more');
        }
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
        if (window.innerWidth < 890) {
         console.log('Less than 890px');
        } else {
         console.log('890px or more');
        }
    }, true);
}
else {
    console.log('browser does not support Javascript event binding');
}

Answer 4

只需尝试以下代码

    window.onresize = resize;

    function resize()
    {
       if(document.body.clientWidth < 890)
          {
             alert("resize event detected!");
          }
    }

Answer 5

const on = (e, i, t = window) => typeof t.addEventListener === 'function'
    ? t.addEventListener (e, i)
    : t.attachEvent ('on' + e, i)
const test = () => console.log (window.innerWidth < 890 ? '< 890' : '>= 890')

on ('resize', test)

Answer 6

只需使用：

window.onresize = function(event) {
    //your code here
};

调整浏览器窗口屏幕大小后，我的功能将重新执行

6 个答案: