onresize 事件
定义和用法
onresize 事件会在窗口或框架被调整大小时发生。
语法
In HTML:
<element
onresize="SomeJavaScriptCode">
JavaScript 中:
window.onresize=function(){SomeJavaScriptCode};
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
浏览器支持
所有主要浏览器都支持 onresize 事件
以下 HTMl 标签支持 onresize事件:
<a>, <address>, <b>, <big>, <blockquote>,
<body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>,
<input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>,
<samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>
事件对象
在路上
159***4800@qq.com
参考地址
发现浏览器窗口缩小时会触发两次 onresize 事件,解决方法:
当浏览器窗口大小改变的时候将会触发onresize事件。
可以监控该事件的发生做一些响应式的处理:
JS:
jQuery:
在监控的过程中发现每次改变浏览器窗口的时候 onresize 事件都会触发两次(产生 的原因貌似比较复杂,网上没有定论,发现在最大化浏览器的时候,浏览器也会闪一下,有两次窗口大小的改变)。
解决方法: setTimeout()
在路上
159***4800@qq.com
参考地址
碧霜寒冰
764***220@qq.com
onresize 事件通过监听对象的高和宽,其中任何一个属性发生变化都会触发 onresize 事件。
楼上提到的解决方法存在问题。
除了 window 对象,其他 html 标签好像并不支持 onresize 事件,定义了之后并不会触发。
碧霜寒冰
764***220@qq.com