每当调整浏览器窗口屏幕大小时，让我的函数重新执行答案

【问题标题】：Getting my function to re-execute whenever the browser window screen size is adjusted每当调整浏览器窗口屏幕大小时，让我的函数重新执行
【发布时间】：2018-11-14 21:00:56
【问题描述】：

当浏览器大小调整为大于或小于 890 像素时，我正在尝试让我的简单 javascript 函数（没有 jQuery）向控制台记录一条消息。此代码在加载时起作用，但仅在页面加载时说明起始宽度：

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

但我下面使用窗口事件的代码不起作用：

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

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

【问题讨论】：

标签： javascript

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

谢谢 - 我在另一页上看到了这个。 ', true' 部分有什么作用？
check this 了解更多信息

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试下面的代码

    window.onresize = resize;

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

【讨论】：

【解决方案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)

【讨论】：

【解决方案6】：

只需使用：

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

【讨论】：

为什么不使用window.attachEvent？
@Justinas 为什么不使用window.addEventListener
@Keith 还是同样的问题...应该解释一下而不是just try this