腾讯云618限量抢购

JavaScript onresize 事件:当浏览器窗口或 HTML 对象改变大小

最后更新:2012-05-19 13:07阅读:35240

JavaScript onresize 事件

当浏览器窗口(显示web文档的窗口)或 HTML 对象被改变大小时会触发 onresize 事件。

支持该事件的 HTML 标签

<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>

支持该事件的 JavaScript 对象

window

onresize 实例

下面的例子演示了当浏览器窗口被调整大小时,弹出一个消息提示框:

<html>
<body onresize="alert('浏览器窗口已被改变!')">
</body>
</html>

提示

在 IE 和 Opera 浏览器中,只要窗口的边框被改变一个像素,onresize事件就会被触发;而在 Mozilla Firefox 等其他浏览器中,只在停止对窗口的大小改变时才触发 onresize 事件。显然后者比较接近实际想要的效果,下面的例子利用 setTimeout() 方法,在 IE 浏览器中模拟实现这个效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">
<html>

<script type="text/javascript">

var resizeTimer = null; 
alert("宽度:"+document.documentElement.clientWidth + " 高度:"+document.documentElement.clientHeight); 
function doResize(){ 
    alert("新宽度:"+document.documentElement.clientWidth + " 新高度:"+document.documentElement.cli
    entHeight); 
    resizeTimer = null; 
}
window.onresize = function(){
    if( resizeTimer == null) {
        resizeTimer = setTimeout("doResize()",1000);
    } 
}

</script>

<body>
</body>
</html>

例子语法解释

  1. 原理为绑定 window.onresize 事件,通过 setTimeout() 方法延缓执行 onresize 事件
  2. document.documentElement.clientWidth 为获取文档显示窗口宽度尺寸(像素)
  3. setTimeout("doResize()",1000) 表示延迟1秒(1000毫秒)执行 doResize 函数
  4. 必须设定 DOCTYPE 类型,在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度

本章节内容共分 22 部分:
  1. 1. JavaScript 事件
  2. 2. JavaScript onclick 事件:鼠标点击页面某个对象
  3. 3. JavaScript ondblclick 事件:鼠标双击页面某个对象
  4. 4. JavaScript onmousedown 事件:鼠标任何一个按键被按下
  5. 5. JavaScript onmouseup 事件:鼠标任何一个按键被松开
  6. 6. JavaScript onmouseover 事件与 onmouseout 事件:鼠标指针移动到对象上或离开对象
  7. 7. JavaScript onkeydown 事件:键盘上某个按键被按下
  8. 8. JavaScript onkeypress 事件:按下或按住一个键盘按键
  9. 9. JavaScript onkeyup 事件:键盘按键被松开
  10. 10. JavaScript onblur 事件:页面元素失去焦点
  11. 11. JavaScript onfocus 事件:页面元素获得焦点
  12. 12. JavaScript onchange 事件:表单文本域或选择域发生改变
  13. 13. JavaScript onsubmit 事件:表单被提交
  14. 14. JavaScript onreset 事件:表单被重置
  15. 15. JavaScript onload 事件:页面或图像加载完成后
  16. 16. JavaScript onunload 事件:关闭页面或页面被改变为其他页面
  17. 17. JavaScript onerror 事件:加载页面或图像时发生错误
  18. 18. JavaScript onresize 事件:当浏览器窗口或 HTML 对象改变大小
  19. 19. JavaScript onscroll 事件:滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
  20. 20. JavaScript onselect 事件:文本框中的文本被选中
  21. 21. JavaScript oncopy 事件:文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
  22. 22. JavaScript oncut 事件与 onpaste 事件:文本域文本被剪切或粘贴(禁止粘贴实例)
腾讯云618限量抢购