暂无 |

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>

例子语法解释

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

青少儿编程

java教程

php教程

php+mysql教程

ThinkPHP教程

php实战教程

Linux教程

MySQL

Git

C++

SQL

C语言

vue教程

css

javascript

jquery教程

Django教程

发表评论

最新评论