标签：... 插件 翻页 微信 一页 var document Tampermonkey

前言

最近喜欢用微信读书.电脑版进行看书,
可以竖屏的那种,一页可以显示好多内容,
读起来感觉很好哈,
并且感觉读起来都快了很多.
手机或者Kindle翻了好几页才能读完的,
我使用微信电脑版,竖屏翻个三五下完事...

但是也遇上一件事,毕竟一页显示的行数比较多,
每次翻页完,第一件事先找从哪行开始读...
体验就差点意思了.

这个时候想起了油猴,自己可以写一个插件搞一下嘛...

分析微信读书html源码

当时是正在看<天才在左疯子在右>,
浏览器F12,查看html源码,

我本来以为是一些文本之类的...
想的直接将此页的最后一行文本,
用黄色或者红色标记出来.

结果发现是类似下面这样的...↓

<div class="wr_canvasContainer" style="width: 800px; height: 6160px;">

<canvas style="position:absolute;left:0;top:8px;width:800px;height:3989px;" width="800" height="3989">
</canvas>
<canvas style="position:absolute;left:0;top:4012px;width:800px;height:2141px;" width="800" height="2141">
</canvas>

</div>

两个canvas元素.
可能是为了爬取文本内容搞得一些东西.
文本标颜色的计划出师未捷身先死...
想着在这个canvas上做文章吧...

初版.canvas.涂鸦之旅

先要找到本页的最后一行的高度是多少...
本来以为这个高度估计还需要一番计算.
搜索了浏览器的各种高度...
并且涉及到滚动条...
最后终于找到一个属性↓

//返回文档在窗口垂直方向滚动的像素
window.pageYOffset

有了这个高度,就很好搞了.
开始在画布上涂鸦...

// ==UserScript==
// @name         微信阅读.翻页.标记上一页读的位置
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://weread.qq.com/web/reader/*
// @grant        none
// @require      http://libs.baidu.com/jquery/2.1.4/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';
    $(document).keydown(function(event){
　　　　if(event.keyCode == 34){
　　　　　　MarkLine();
　　　　}
　　});
    // Your code here...
    function MarkLine(){

        var yHeight = window.pageYOffset + document.body.clientHeight - 200;
        console.log("当前window.pageYOffset..." + window.pageYOffset);
        console.log("当前document.body.clientHeight..." + document.body.clientHeight);

        var dIndex = 0;
        if(yHeight > 3967){
            dIndex = 1;
            yHeight -= 3995;
        }
        var c=document.getElementsByTagName("canvas")[dIndex];

        var ctx=c.getContext("2d");

        // 创建渐变
        var grd=ctx.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white");
        // 填充渐变
        ctx.fillStyle=grd;
        ctx.fillRect(600,yHeight,300,1);
    }
})();

局限性
后来打开<剑来>看了一章,发现了问题.
刚开始的几页确实标记了,但是往后就不会再标记...
打开F12瞅了下,发现了问题所在:
一章节如果文本太多的话,前几页确实还是在画布上,
但是后面的就是一些打乱的文本了.

总结就是↓
适合那种一章节文本不是很多,
高度不是很高(大概高度不超过6160的书籍)
比如,<天才在左疯子在右>
如果看<剑来>这样一章节万八千字的,
这种也就适合前两页翻页...

改进.html.涂鸦

后来就想了下,刚开始被canvas牵着鼻子走了,
因为文本是在画布上,就想着在canvas上下功夫,
但是canvas终究是html代码中的...
直接在html中修改不是更好吗?

想到是搞一个div,然后显示为一个横线,主要改style,
来让这个横线显示在想出现的位置...

<div id="mkDiv" style="position:absolute;border: 1px solid red;left:1200px;top:26386px;width:200px;"></div>

// ==UserScript==
// @name         微信阅读.翻页.记录上一页阅读位置
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://weread.qq.com/web/reader/*
// @grant        none
// @require      http://libs.baidu.com/jquery/2.1.4/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';
    //新建一个div,用于显示为一条线
    var newDiv = document.createElement("div");
    newDiv.style="position:absolute;border: 1px solid red;left:1200px;top:26386px;width:200px;";
    newDiv.id="mkLineDiv"
    document.body.appendChild(newDiv);

    $(document).keydown(function(event){
        //翻页按键.Page Down
        if(event.keyCode == 34){
            MarkLine();
        }
    });
    // 标记上一页阅读
    function MarkLine(){
        var htmlHeight = window.pageYOffset + document.body.clientHeight - 40;
        var tempStyle="position:absolute;border: 1px solid red;left:1200px;top:"+(htmlHeight)+"px;width:200px;";
        console.log(tempStyle);
        $("#mkLineDiv").attr("style",tempStyle);
    }
})();

结尾

其实,关于翻页还需要标记上一页读的位置,
有人可能觉得多此一举,
每次翻页后,接着从这一页的最上面读就是了呗...
我根据自己的体验,总结了2点我觉得需要更改的.

1. 如果这一章节,有2.5页,
微信读书电脑版,当你翻到最后一页的时候,
最后一页不是显示2.0页~2.5页的内容,
而是显示1.5页~2.5页的内容.

2. 例如,30行为一页的内容,一章节一共2页,
我翻到第二页的时候,直接显示31行,
我总是感觉30行与31行之间还有内容是未读的...
总是在按一下"↑"往上翻一行确认下....

总之,个人习惯,因人而异.

最后上一张,标记后的章节...(√,你没看错,就是那一个红色的横线...)

标签：...,插件,翻页,微信,一页,var,document,Tampermonkey
来源： https://www.cnblogs.com/love-zf/p/13812330.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。