关于 Chrome 浏览器中 onresize 事件的 Bug

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

    function init() {

        alert('a');

        window.onresize = function() {

            init();
            
        }

    }

    init();

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

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

    function init() {

        var width = window.innerWidth;

        alert('a');

        window.onresize = function() {

            var width2 = window.innerWidth;

            if (width != width2) {

                init();
                
            }
        }

    }

    init();

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小文博客

DIASPORA – 简约素色响应式单栏 WORDPRESS 博客主题

2284
来自专栏iOS 开发杂谈

iOS如何使用TestFlight进行App Beta版测试

TestFlight的测试方式分为两种: 一种是内部测试; 一种是外部测试。 从功能上讲,这两种方式都可以为测试人员在测试阶段对你的App进行测试。但是既...

1K2
来自专栏君赏技术博客

模块化架构你为什么这么火,让我如此亲睐你?

前几天就开始研究了关于新项目的架构,也研究了模块化架构和关于Cocoapods私有库的研究。

1623
来自专栏假装我会写代码

基于 Laravel 的用户动态模块开发

1533
来自专栏数据科学与人工智能

【Python环境】Python爬虫入门(2):爬虫基础了解

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

2799
来自专栏互联网资讯

前端代码编辑神器Brackets

brackets自出现以来,一直被大家认为是前端代码编辑神器。在html+css+js的编写方面,它所体现出的易用性,专业性几乎也要优于sublime的体验。所...

1713
来自专栏腾讯大数据的专栏

那些年,我们一起走过的 iOS 推送的坑

本文针对iOS推送接入过程中遇到的一个实际案例,提出了iOS推送排查问题的思路,在解决该问题的基础上,更给出了通用的iOS推送自测的检查路径。

6330
来自专栏互联网开发者交流社区

SEO-搜索引擎高级搜索指令

1665
来自专栏大数据和云计算技术

操作系统底层技术——CPU亲和性

image.png 头图是加拿大lake simcoe自然风光,非常漂亮,基本没有中国游客,适合深度游。 这是操作系统底层技术第二篇,前一篇是《Codegen技...

3219
来自专栏葡萄城控件技术团队

渐进式Web应用程序的深入概述

如果您是Web开发人员,您可能已经了解渐进式Web应用程序(PWA)或已经实现了自己的应用程序。 如果您不熟悉,本文将深入概述渐进式Web应用程序的实现原理,以...

792

扫码关注云+社区

领取腾讯云代金券