爱客仕-前端团队博客园

刷知乎的正确姿势，自动翻页!

发表于 |

本来打算写一下网络工具在开发中应用的文章，不过呢，咱公司网络工具用的不是很多，只是在用charles, gas mask 和 mamp没有用，好像是也没有用的必要。而且真要写，篇幅也是挺大的。

所以呢，咱就写篇接地气的，解决一个痛点。刷知乎居然要用鼠标，不能忍。

大家在刷知乎的过程中，可能会点赞，收藏，关注，这些行为都会在 最新动态 中展示。如果想要回味一下自己感兴趣的东西，刷一遍 最新动态 那是极好的。

可是知乎的 最新动态 是有长度限制的，每看几条，就得点一下 更多 按钮，简直不能忍。如下图：

更多按键

点一下，点一下，完全没有刷的快感。
所以呢，我决定用个脚本来让它自动加载。
准备工具： firefox GreaseMonkey(油猴子）插件

chrome 也可以，名字叫Tampermonkey。其它浏览器就未知了。以下仅以火狐为例

装好GreaseMonkey之后，新建脚本

新建脚本

起一个名字，自己能看懂就好。 脚本应用到 把最后一个单词换成 *, 意味着匹配所有的用户的 最新动态 页。
知乎的搜索用的也是一样的加载模式，所以可以再加上一条
https://www.zhihu.com/search*
然后就可以写代码了，闲话不多说，接下来就到了上代码的时候了。
配置一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// ==UserScript==
// @name        scroll for zhihu
// @namespace   594030667
// @include     https://www.zhihu.com/people/*
// @include     https://www.zhihu.com/search*
// @version     1
// @grant       none
// ==/UserScript==
// 注册一个滚动事件监听,绑定Loadmore方法
window.addEventListener('scroll', loadmore, false)
// requestFlag 是为了防止重复请求的，因为滚动是个触发频率很高的事件，滚一下触发个几十次，显然不是很合适
// 使用requestFlag 目的就是尽量一次滚动只触发一次加载
var requestFlag = true
function loadmore() {
  // scrollMaxY - scrollY = 滚动条距底部的距离
  // warn 不保证兼容性
  // scrollMaxY 很神奇啊，dash上查不到兼容性， can i use 上完全查不到......
  // 不过因为看起来和scrollY 很和谐，所以我要用它
  var pixToBottom = window.scrollMaxY - window.scrollY
  // 找到知乎的 更多 按钮
  var zhMore = document.querySelector('.zu-button-more')
  // 什么时候触发 自动加载
  // 这里取得是 屏幕调试一半 与 600 之中的最小值
  // 比如屏幕调试是 1080 ，那么就是 540
  var triggerPix = Math.min(window.screen.availHeight / 2, 600)
  console.log('pixToBottom', pixToBottom)
  console.log('MaxY', window.scrollMaxY)
  console.log('scrollY', window.scrollY)
  // 滚动条距底部的距离符合判定时
  if (0 < pixToBottom && pixToBottom < triggerPix) {
    // requestFlag 派上用场了
    if (requestFlag) {
      // 模拟点击知乎 更多 按钮
      zhMore.click()
      //  requestFlag 初始为true, 加载一次后，变成false
      requestFlag = false
      console.log('request success')
    }
  }
  // requestFlag 终究要变回 true的， 要不然就不能进入模拟点击的判定了
  // requestFlag 变成 true 的条件可以根据自己的体验来写
  // 写得宽泛的话，重复触发的概率大一点,比如说，一下子加载了10页
  // 写得比较严苛，重复触发的概率小一点,也有可能不触
  if (pixToBottom > triggerPix && pixToBottom < triggerPix + 500) {
    requestFlag = true
  }
  console.log('pixToBottom', pixToBottom)
  console.log('requestFlag', requestFlag)
}

代码比较少，可能有3分之2都是注释和console.log，让诸位见笑了。
再献上一个网页淘宝登录时，不用手动从二维码切换密码输入的脚本。（有了1password,我还怕输密码？）

1
2
3
4
5
6
7
8
9
10
11
12
13
// ==UserScript==
// @name        taobao-no-qr
// @namespace   594030667
// @include     https://login.taobao.com/member/login.jhtml*
// @version     1
// @grant       none
// ==/UserScript==
document.addEventListener('DOMContentLoaded', function (event) {
  console.log('DOM fully loaded and parsed');
  var loginForm = document.getElementById('J_StaticForm');
  loginForm.setAttribute('style', 'display:block !important')
  console.log(loginForm.style.display)
});

效果如图
淘宝不想扫二维码