我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 bug 吧,估计他们的工程师认为浏览器打开时也算窗口发生了变化。解决问题之前我搜索了相关内容,确实有关于 Chrome 的 onresize 的问题,但跟我遇到的问题还有很大不同。我把这个问题抽象为以下函数:

  1. function init() {
  2.  
  3. alert('a');
  4.  
  5. window.onresize = function() {
  6.  
  7. init();
  8.  
  9. }
  10.  
  11. }
  12.  
  13. init();

大家可以自行测试,在 Chrome 中会弹出两次 alert,而其它浏览器只会弹出一次 alert,因为 Chrome 浏览器打开时就执行了 onresize 事件。所以现在要解决的问题就是如何让 init() 函数在 Chrome 浏览器打开时只执行一次。

这个问题看似容易却很棘手。因为只有打开浏览器时才会有这个 bug,某种程度上属于无关紧要的问题。原本打算放掉这个问题,但是我是追求完美的人,遇到问题总会想尽办法解决。容我感慨一句,很多问题就像脑筋急转弯,转个弯就能解决。好了,废话不多说,直接贴代码,按照我之前的做法,我还是先将代码折叠起来,请大家以自己的方式解决一下,或许比我的方法更好,欢迎留言。

  1. function init() {
  2.  
  3. var width = window.innerWidth;
  4.  
  5. alert('a');
  6.  
  7. window.onresize = function() {
  8.  
  9. var width2 = window.innerWidth;
  10.  
  11. if (width != width2) {
  12.  
  13. init();
  14.  
  15. }
  16. }
  17.  
  18. }
  19.  
  20. init();

我想我在解决这个问题时耍了一点小聪明,至少想要从根本上也就是在 Chrome 浏览器打开时就禁止 onresize 事件是不可能的。所以我加了一个窗口宽度作为对比,这样就可以保证 init() 函数只执行一次。在这里还有一个小问题,我最初用的是高度对比,但是不知道为什么两个高度值存在偏差,大家可以将宽度改为高度测试一下,希望知道这个小问题的朋友告诉我。

最后贴一下我的插件地址 https://github.com/nzbin/CardShow,我在之前的文章中也介绍了该插件中其它的一些问题,感兴趣的朋友可以点此查看

关于 Chrome 浏览器中 onresize 事件的 Bug的更多相关文章

  1. Google Chrome浏览器中如何使用命令

    Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome 1 2 3 分步阅读 Google Chrome浏览器有很多的特 ...

  2. 【js】IE、FF、Chrome浏览器中的JS差异介绍

    如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff ...

  3. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  4. 【F12】chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  5. chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  6. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  7. 查看 chrome 浏览器中的 Headers

    查看 chrome 浏览器中的 Headers, Response 信息:

  8. 在Chrome浏览器中保存的密码有多安全?

    本文由 伯乐在线 - 黄利民 翻译.未经许可,禁止转载!英文出处:howtogeek.欢迎加入翻译组. [2013-08-09 更新]:最近又开始讨论“Chrome浏览器明文保存密码这个话题了,国外一 ...

  9. Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法

    今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...

随机推荐

  1. Fis3前端工程化之项目实战

    Fis3项目 项目目录结构: E:. │ .gitignore │ fis-conf.js │ index.html │ package.json │ README.md │ ├─material │ ...

  2. java中的锁

    java中有哪些锁 这个问题在我看了一遍<java并发编程>后尽然无法回答,说明自己对于锁的概念了解的不够.于是再次翻看了一下书里的内容,突然有点打开脑门的感觉.看来确实是要学习的最好方式 ...

  3. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  4. .NET里简易实现AOP

    .NET里简易实现AOP 前言 在MVC的过滤器章节中对于过滤器的使用就是AOP的一个实现了吧,时常在工作学习中遇到AOP对于它的运用可以说是很熟练了,就是没想过如果自己来实现的话是怎么实现的,性子比 ...

  5. 带你实现开发者头条APP(四)---首页优化(加入design包)

    title: 带你实现开发者头条APP(四)---首页优化(加入design包) tags: design,Toolbar,TabLayout,RecyclerView grammar_cjkRuby ...

  6. javascript中的继承与深度拷贝

    前言 本篇适合前端新人,下面开始...... 对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就 ...

  7. mybatis_映射查询

    一.一对一映射查询: 第一种方式(手动映射):借助resultType属性,定义专门的pojo类作为输出类型,其中该po类中封装了查询结果集中所有的字段.此方法较为简单,企业中使用普遍. <!- ...

  8. 修改session垃圾回收几率

    <?php //修改session垃圾回收几率 ini_set('session.gc_probability','1'); ini_set('session.gc_divisor','2'); ...

  9. NGINX引入线程池 性能提升9倍

    1. 引言 正如我们所知,NGINX采用了异步.事件驱动的方法来处理连接.这种处理方式无需(像使用传统架构的服务器一样)为每个请求创建额外的专用进程或者线程,而是在一个工作进程中处理多个连接和请求.为 ...

  10. 【干货分享】流程DEMO-加班与调休

    流程名: 加班.调休  业务描述: 加班: 工作日加班可以申请调休,也可以申请支付加班费.原则上都应申请调休:周末加班原则上申请调休:法定节假日加班支付加班费. 加班申请以半小时为单位. 当月加班不能 ...