解决在IE浏览器中JQuery.resize()执行多次的方法(转)

最近在做前台效果的时候用到了JQuery提供的resize()事件。resize 
这个事件是监听浏览器窗口的放大与缩小,也就是说浏览器窗口大小的变化。

我在W3CSCHOOL上面查阅的时候,提供了一个例子。W3C源码


  1. <</SPAN>html>
  2. <</SPAN>head>
  3. <</SPAN>script type="text/javascript" src="/jquery/jquery.js"></</SPAN>script>
  4. <</SPAN>script type="text/javascript">
  5. x=0;
  6. $(document).ready(function(){
  7. $(window).resize(function() {
  8. $("span").text(x+=1);
  9. });
  10. $("button").click(function(){
  11. $(window).resize();
  12. });
  13. });
  14. </</SPAN>script>
  15. </</SPAN>head>
  16. <</SPAN>body>
  17. <</SPAN>p>窗口的大小被调整了 <</SPAN>span>0</</SPAN>span> 次。</</SPAN>p>
  18. <</SPAN>p>请试着调整浏览器窗口的大小。</</SPAN>p>
  19. <</SPAN>button>触发窗口的 resize 事件</</SPAN>button>
  20. </</SPAN>body>
  21. </</SPAN>html>
 结果我在IE环境下放大窗口 resize 事件执行了两次。后来我在谷歌和百度上面查询了下, 都存在IE环境下执行两次的相关信息。最后发现一个很不错的解决方案。 国外有个哥子写了个插件专门针对Jquery.resize()事件增强了。 地址在这里:http://benalman.com/projects/jquery-resize-plugin/ 在添加jquery.js之后在添加 "jquery.ba-resize.js" 就可以了。  
 
    1. <</SPAN>html>
    2. <</SPAN>title>JQuery - resize()</</SPAN>title>
    3. <</SPAN>head>
    4. <</SPAN>script type="text/javascript" src="js/jquery.js"></</SPAN>script>
    5. <</SPAN>script type="text/javascript" src="js/jquery.ba-resize.js"></</SPAN>script>
    6. <</SPAN>script type="text/javascript">
    7. x=0;
    8. $(document).ready(function(){
    9. $(window).resize(function() {
    10. $("span").text(x+=1);
    11. });
    12. });
    13. </</SPAN>script>
    14. </</SPAN>head>
    15. <</SPAN>body>
    16. <</SPAN>p>窗口大小被调整过 <</SPAN>span>0</</SPAN>span> 次。</</SPAN>p>
    17. <</SPAN>p>请试着重新调整浏览器窗口的大小。</</SPAN>p>
    18. </</SPAN>body>
    19. </</SPAN>html>
时间: 2024-08-02 07:25:29

解决在IE浏览器中JQuery.resize()执行多次的方法(转)的相关文章

bala001 浏览器中的JavaScript执行机制:09 | 块级作用域:var缺陷以及为什么要引入let和const?

前言:该篇说明:|请见 说明 —— 浏览器工作原理与实践 目录 在前面<07 | 变量提升:JavaScript 代码是按照顺序执行的吗?>这篇文章中,我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多于直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷. 虽然 ECMAScript6(以下简称 ES6 )已经通过引入块级作用域并配合 let.const 关键字,来避开了这种设计缺陷,但是由于 Java

解决安卓微信浏览器中location.reload 或者 location.href失效的问题

出自:http://www.cnblogs.com/joshua317/p/6163471.html 在移动wap中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会 存在问题,但早上测试的同学会提出了一个bug:在安卓手机的微信自带浏览器中,这个是失效的,并没有跳转: 原来的代码: window.location.reload(location.href); 初步判断可能是缓存的问题,首先想到的解决办法就是在要跳转的url后面加个时间戳,告知浏览器

.Net中jQuery.ajax()调用asp.net后台方法 总结

利用JQuery的$.ajax()调用.Net后台方法有多种方式, 不多说了  直接上代码 前台代码 1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 getTreeData(getData()); 5 }); 6 7 //获取ajax调用传参方法 8 function getData() { 9 var data = {}; 10 data.username = "an

浏览器中的JavaScript执行机制:08 | 调用栈:为什么JavaScript代码会出现栈溢出?

前言:该篇说明:请见 说明 —— 浏览器工作原理与实践 目录 在上篇文章中,我们讲到了,当一段代码被执行时,JavaScript 引擎先会对其进行编译,并创建执行上下文.但是并没有明确说明到底什么样的代码才算符合规范. 那么接下来我们就来明确下,哪些情况下代码才算是“一段”代码,才会在执行之前就进行编译并创建执行上下文.一般说来,有这么三种情况: 1.当 JavaScript 执行全局代码的时候,会编译全局代码并创建全局执行上下文,而且在整个页面的生存周期内,全局执行上下文只有一份. 2.当调用

解决在IE11浏览器下,JQuery的AJAX方法不响应问题

在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二次就不在响应 例如:下拉框的数据第一次加载会通过AJAX调用后端方法,但是第二次之后就不在调用后端 问题原因: IE的浏览器缓存机制不大好,为了防止AJAX的不停的提交,当参数没有改变的时候,将不再响应AJAX,会直接返回. 就是IE对于相同的参数,只会请求一次 解决方法: 使用AJAX传递参数的时

浏览器中的 JavaScript执行机制:07 | 变量提升:JavaScript代码是按顺序执行的吗?

前言:该篇说明:请见 说明 —— 浏览器工作原理与实践 目录 讲解完宏观视角下的浏览器后,从这篇文章开始,我们就进入下一个新的模块了,这里我会对 JavaScript 执行原理做深入介绍. 今天在该模块的第一篇文章,我们主要讲解执行上下文相关的内容.那为什么先讲执行上下文呢?它这么重要吗?可以这么说,只有理解了 JavaScript 的执行上下文,你才能更好地理解 JavaScript 语言本身,比如变量提升.作用域和闭包等.不仅如此,理解执行上下文和调用栈的概念还能助你成为一名更合格的前端开发

jQuery.Ajax()执行WCF Service的方法

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. www.qidian.com/Bo

第十一章:WEB浏览器中的javascript

客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节同样涵盖重要的web应用所需要的网络编程API.本地存储和检索数据.画图等.主要包含内容有以下章节: web浏览器中的javascript / window对象 /  脚本化文档 /  脚本化css / 事件处理 / 校本化http / jQuery类库 / 客户端存储  /  多媒体和图形编程 /

百度editor富文本编辑器在火狐浏览器中的兼容性

最近做项目的时候遇到了百度的一个神器:editor富文本编辑器.但是也遇到了很多兼容性的问题,现在写一段随笔一起分享一下: 第一:在火狐浏览器中,该编辑器部分的编辑功能按钮不能显示 可以看出,在火狐浏览器中只会显示编辑框,而上面的编辑按钮缺没有.(但是在IE7,IE8上不能显示的原因在于新版本中屏蔽了 anonymous()方法,可以通过修改eWebEditor的JS文件来修正错误) 解决方案:打开火狐-->工具栏-->“工具”-->"添加附件",使用搜索功能来搜索“