window.onresize事件是在窗口改变大小之前发生的

p2227 2012-04-18 06:43:51
如何写一个事件在窗口改变大小后发生?
...全文
24699 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhishiheng 2014-05-28
  • 打赏
  • 举报
回复
设个定时器 可行
p2227 2012-04-24
  • 打赏
  • 举报
回复
问题都没回应呢
p2227 2012-04-19
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 的回复:]

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

<html>
<head>

<title>onresize test</title>

<script type="text/j……
[/Quote]你这个例子说服力是不够的,以窗口大小作为判断才行,并且alert会破坏原来的事件,要用innerHTML或者console
三石-gary 2012-04-19
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<title>onresize test</title>

<script type="text/javascript">

window.onresize = resize;

function resize() {
alert("resize event detected!");
}
</script>
</head>

<body>
<p>Resize the browser window to fire the resize event.</p>
</body>
</html>

通过代码调试。。是在大小改变后发生的
p2227 2012-04-19
  • 打赏
  • 举报
回复
晕哦,后来调试貌似发现又是在大小改变后发生的,我自己再试试
p2227 2012-04-19
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 的回复:]

引用 2 楼 的回复:

首先onresize是用户手动触发的,程序resizeby 和resizeto并不触发,

其次,onresize不同的浏览器触发方式是不一样的,
我用IE8测试是改变大小后发生两次,用opera 11,是改变过程中发生很多次(好象内置了一个循环),firefox11是改变后发生一次。

我这里有两个文件,第一个文件源HTML,就是一个打开新窗口的按钮
……
[/Quote]你收藏的代码有执行过吗?很多对象是那个博客以前定义的吧,怎么样定义?
p2227 2012-04-19
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

首先onresize是用户手动触发的,程序resizeby 和resizeto并不触发,

其次,onresize不同的浏览器触发方式是不一样的,
我用IE8测试是改变大小后发生两次,用opera 11,是改变过程中发生很多次(好象内置了一个循环),firefox11是改变后发生一次。

我这里有两个文件,第一个文件源HTML,就是一个打开新窗口的按钮
HTML code

<i……
[/Quote]你的这段程序我用firefox和ie8都没执行,依然是i not set,chrome倒是执行了4次
hch126163 2012-04-19
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

首先onresize是用户手动触发的,程序resizeby 和resizeto并不触发,

其次,onresize不同的浏览器触发方式是不一样的,
我用IE8测试是改变大小后发生两次,用opera 11,是改变过程中发生很多次(好象内置了一个循环),firefox11是改变后发生一次。

我这里有两个文件,第一个文件源HTML,就是一个打开新窗口的按钮
HTML code

<i……
[/Quote]
学习了
Acesidonu 2012-04-19
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]
首先onresize是用户手动触发的,程序resizeby 和resizeto并不触发,

其次,onresize不同的浏览器触发方式是不一样的,
我用IE8测试是改变大小后发生两次,用opera 11,是改变过程中发生很多次(好象内置了一个循环),firefox11是改变后发生一次。

我这里有两个文件,第一个文件源HTML,就是一个打开新窗口的按钮

HTML code

……
[/Quote]
++
josephSC 2012-04-19
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

首先onresize是用户手动触发的,程序resizeby 和resizeto并不触发,

其次,onresize不同的浏览器触发方式是不一样的,
我用IE8测试是改变大小后发生两次,用opera 11,是改变过程中发生很多次(好象内置了一个循环),firefox11是改变后发生一次。

我这里有两个文件,第一个文件源HTML,就是一个打开新窗口的按钮
HTML code

<i……
[/Quote]

完全同意,对于ie来说是触发两次的,不过收藏过一个牛人牛人写的function(http://mbccs.blogspot.ca/2007/11/fixing-window-resize-event-in-ie.html)解决了这个问题,在这共享下希望对大家有帮助


Sys.Application.add_load(function(sender, args) {
$addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}
wzhiyuan 2012-04-18
  • 打赏
  • 举报
回复
首先onresize是用户手动触发的,程序resizeby 和resizeto并不触发,

其次,onresize不同的浏览器触发方式是不一样的,
我用IE8测试是改变大小后发生两次,用opera 11,是改变过程中发生很多次(好象内置了一个循环),firefox11是改变后发生一次。

我这里有两个文件,第一个文件源HTML,就是一个打开新窗口的按钮

<input type="button" value="open" id="btn1" />
<script type="text/javascript" >
$("#btn1").click(function(event) {
window.open("1.htm","","width=100,height=100,resizable=yes");
});
</script>

下面是弹出窗口1.htm的源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1</title>
</head>
<body>
<div id="div1">i not set </div>
</body><script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
<script type="text/javascript" >
var i = 0;
var s = "";
window.resizeBy(100, 100);

$(document).ready(function() {
$(window).resize(function() {
i++;
s += "i=" + i + ",width=" + $(window).width() + "; ";
document.getElementById("div1").innerHTML = s;
});
});
</script>
</html>


所以你要想做到改变窗口大小后发生一次就可能要分别处理 resizeby,resizeto以及手动onresize
由于手动onresize的处理浏览器不一致,你就可能需要启动一个定时器来判断一下,是否在一个间隔里winow宽高没有变化,没有变化就认为结束了,就清除定时器,执行你的逻辑。
001007009 2012-04-18
  • 打赏
  • 举报
回复
写个延时可以不?


<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>

</style>
</head>
<body>

<div id="a"></div>

<script>
function $(o){return document.getElementById(o);}
window.onresize = function(){
setTimeout(function(){
$('a').innerHTML = Math.floor(Math.random() * 100);
}, 1000)
}
</script>
</body>
</html>





87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧