在前端的web页面中浏览器窗口或者框架的大小被改变时会触发js脚本中的 onresize 事件,当然也可以利用 onresize 事件在浏览器窗口或框架的大小发生改时,可以给用户弹出提示或改变背景颜色,布局等等!简单来说在自适应网站的布局中onresize事件被应用的比较多!

js onresize 事件的使用方法

1、浏览器窗口被改变时,输出可视区域的高度与宽度

示例1:

window.onresize = resize;
function resize(){
    console.log('可视宽'+ document.documentElement.clientWidth);
    console.log('可视高' + document.documentElement.clientHeight);
}

示例2:

window.onresize = function(){
    console.log('可视宽'+ document.documentElement.clientWidth);
    console.log('可视高' + document.documentElement.clientHeight);
}

注意:示例1与示例2中的代码是等价的,只是写法不同而已!

2、onresize 事件可以直接绑定到body元素上,可以参考下面的代码!

示例3:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--注意 body元素中的代码-->
<body onresize="alert('浏览器的大小被改变了!');">
</body>
</html>

PS:测试发现 onresize 事件无法绑定到一些 DIV 元素上,不知大家有没有好的方法!