在IE浏览器中resize事件执行多次的解决方法
发布日期:2021-06-29 05:05:51
浏览次数:3
分类:技术文章
本文共 2791 字,大约阅读时间需要 9 分钟。
这是个让人每次改变页面窗口的大小时很郁闷的方法,尤其在IE浏览器中,稍微动下窗口边框,就会触发很多次事件。更让人蛋疼的是在resize事件中包含某些页面内容处理或计算导致resize事件再次被触发的时候,IE会随机陷入假死状态。 网上找了好久,都是千律一篇的,到处都是转载的一个方法;以下是网上找到的一个解决方法: 代码如下:
var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout("changeHeight()", 500); });//resize事件延迟500毫秒执行
这个方法虽然可以解决多次执行事件问题,但是不完美,最后我找到了一个jquery插件形式的解决方案;
代码如下: /* =============================================================================== WResize is the jQuery plugin for fixing the IE window resize bug ............................................................................... Copyright 2007 / Andrea Ercolino ------------------------------------------------------------------------------- LICENSE: WEBSITE: =============================================================================== */ ( function( $ ) { $.fn.wresize = function( f ) { version = '1.1'; wresize = {fired: false, width: 0}; function resizeOnce() { if ( $.browser.msie ) { if ( ! wresize.fired ) { wresize.fired = true; } else { var version = parseInt( $.browser.version, 10 ); wresize.fired = false; if ( version < 7 ) { return false; } else if ( version == 7 ) { //a vertical resize is fired once, an horizontal resize twice var width = $( window ).width(); if ( width != wresize.width ) { wresize.width = width; return false; } } } } return true; } function handleWResize( e ) { if ( resizeOnce() ) { return f.apply(this, [e]); } } this.each( function() { if ( this == window ) { $( this ).resize( handleWResize ); } else { $( this ).resize( f ); } } ); return this; }; } ) ( jQuery );你可以把上面的代码另存为jquery.wresize.js导入网页,把以下代码拷贝到记事本中,另存为网页,然后测试一下。示例:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" style="overflow:hidden;"> <head> <title> test window resize </title> <script type="text/javascript" src="> <script type="text/javascript" src="jquery.wresize.js"></script> <script type="text/javascript"> jQuery( function( $ ) { function content_resize() { var w = $( window ); var H = w.height(); var W = w.width(); $( '#content' ).css( {width: W-20, height: H-20} ); } $( window ).wresize( content_resize ); content_resize(); } ); </script> </head> <body> <div id="content" style="border: 1px dashed silver; position:absolute; overflow:auto;"> test test testtest test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> </body> </html>转载地址:https://blog.csdn.net/zhaokuner/article/details/9733905 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月21日 21时09分10秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
分布式与集成
2019-04-29
C#SUM函数改变数据精度问题
2019-04-29
机器翻译/注意力机制
2019-04-29
Transformer介绍
2019-04-29
SpringMVC异常处理之第三种:ExceptionHandler注解
2019-04-29
如何通过Eclipse来创建SpringBoot项目?
2019-04-29
Spring中 JavaConfig和常见注解
2019-04-29
SpringBoot启动类注解简要介绍
2019-04-29
Spring Boot扩展启动行为-改变启动Banner
2019-04-29
如何通过设置setting加快Maven 及更新SpringBoot项目的速度
2019-04-29
如何设置Spring Boot热部署
2019-04-29
Spring Boot整合Web开发-JSON
2019-04-29
Spring Boot整合Web开发-如何集合模板Thymeleaf?
2019-04-29
Spring Boot整合Web开发-freemarker
2019-04-29
Spring Boot整合Web开发之如何集成JSP
2019-04-29
全局异常处理之自定义全局错误页面、404及500错误页面
2019-04-29
全局异常处理之@ControllerAdvice+@ExceptionHandler
2019-04-29
全局异常处理之SimpleMappingExceptionResolver
2019-04-29
全局异常处理之如何使用HandlerExceptionResolver接口
2019-04-29