前言
最近喜歡用微信讀書.電腦版進行看書,
可以豎屏的那種,一頁可以顯示好多内容,
讀起來感覺很好哈,
并且感覺讀起來都快了很多.
手機或者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行之間還有内容是未讀的...
總是在按一下"↑"往上翻一行确認下....
總之,個人習慣,因人而異.
最後上一張,标記後的章節...(√,你沒看錯,就是那一個紅色的橫線...)
