zoukankan      html  css  js  c++  java
  • 关于 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();
    View Code

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

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

  • 相关阅读:
    Codeforces 1255B Fridge Lockers
    Codeforces 1255A Changing Volume
    Codeforces 1255A Changing Volume
    leetcode 112. 路径总和
    leetcode 129. 求根到叶子节点数字之和
    leetcode 404. 左叶子之和
    leetcode 104. 二叉树的最大深度
    leetcode 235. 二叉搜索树的最近公共祖先
    450. Delete Node in a BST
    树的c++实现--建立一棵树
  • 原文地址:https://www.cnblogs.com/nzbin/p/6216344.html
Copyright © 2011-2022 走看看