欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信公众号DOM的一个坑

程序员文章站 2022-05-18 09:06:19
最近不知道写什么,node的源码有点不知道怎么入手,所以还在努力学习中…… 在写微信公众号的时候遇到了一个小bug,有一个tab栏,在开发者工具、IOS手机上都OK,但是一到我的小米note上就GG了,怎么切换都无法触发对应的请求,核心代码如下: 点击切换后,会重置分页的index参数,然后将滚轮弄 ......

  最近不知道写什么,node的源码有点不知道怎么入手,所以还在努力学习中……

  在写微信公众号的时候遇到了一个小bug,有一个tab栏,在开发者工具、IOS手机上都OK,但是一到我的小米note上就GG了,怎么切换都无法触发对应的请求,核心代码如下:

// 点击切换
this.pageIndex = 1;
this.$el.scrollTo(0, 0);
this.$router.replace({ query: { days: key } }); const data = await this.loadingData(); this.list = data.items;

  点击切换后,会重置分页的index参数,然后将滚轮弄到顶,请求数据然后赋值给list。

  看起来很简单, 但是在我的安卓机上就是没反应,后来用了chrome://inspect/#devices发现报了这样的错:微信公众号DOM的一个坑

  这可难倒我胖虎了……简单在MDN一查,发现第一个弹出来的竟然是Window.scrollTo,这才恍然大悟,这个方法理论上是BOM上的。那么问题来了,为什么我在浏览器跟IOS可以执行那段代码呢?

  一开始我想的是在chrome里,window被处理成DOM对象的原型,调用scrollTo时通过原型链查找实际上调用的是window.scrollTo。

  然而并不是这样:微信公众号DOM的一个坑

  但是这样又是正确的:微信公众号DOM的一个坑

  这TM就很尴尬了,哪里飞来的方法?只能一个一个原型的翻了,于是我在某个对象上发现了这个:

  微信公众号DOM的一个坑

  这个方法确实在原型上啊!难道是微信的DOM比较特殊,自己在chrome外面包了层皮,把scrollTo搞丢了?

  回到了devtool中一层一层的翻,直到我看到了:

  微信公众号DOM的一个坑

  还真没有,这个微信浏览器,搞毛线。

  

  结论大概是微信的皮包浏览器内核比较旧,某个新版的chrome将scrollTo加到了DOM的原型方法上,至于哪个版本加上的,由于这个东西没那么重要,所以在wiki的chrome history也找不到记录,大概只有在V8的commit里面寻找线索了。

  我可没那么闲,反正问题解决了,用的scrollTop,免得又遇到奇怪的bug。