论坛网页版增强脚本：适配任意倍率缩放页面，大幅提升窄屏阅读体验（Tampermonkey脚本）

volta

上次由于考虑不周，擅自发布了破坏性脚本，于是这次想着痛改前非，来搞一个好脚本。

发现问题：有的时候看四格漫画，或者看很小的文字，就会本能地想要放大页面。可是当页面放大到一定程度以后，有一部分就会跑到屏幕外面，此时要拖动页面底部的滚动条，相当地不方便。比如说下面的这个漫画（相当有趣！）：


如果想要进一步放大，就会变成这个样子：


另外，如果我们想要缩小页面，或者显示器本来就相当巨大，或缩放比例过低，那么页面会变成这样：


如果说上面的都只是有些难受的话，那么看小说的时候，如果页面过窄或缩放比例过高，那么看到的将会是：


想看小说要不断地拖动横向滚动条，恶心到家了。

解决方法有没有呢？或许可以换手机版，但是电脑上是打不开手机版的，点开链接显示的是「立即使用手机访问，获得极速移动体验」，好可恶啊。如果能让电脑端也可以自由点开手机版，或许这个问题也算解决了吧。

但是，总之还是花了点时间写了这个脚本。实话实说，是因为我当时没有想到这一点。先展示一下做了什么改动吧：


隐藏了侧边栏，让页面始终处于屏幕内，缩小了页边距，让图片能够自适应页面宽度，此外将图片自动居中，不论是否有[align]标签。

考虑到很多图片的宽度是直接写的900px，所以在页面宽度大于900px的时候没有选择放大图片，而是保持原大小，只在页面宽度小于图片宽度的时候，适当缩小图片，使之始终保持在页面范围之内。

小说的体验也和这个差不多：


总之就是这样了，依然还是直接放代码，因为论坛不能直接上传.user.js后缀名的文件。如何使用呢？一个方法是在浏览器里安装Tampermonkey插件，然后创建一个新脚本，用下面的代码完全替换新窗口里面的内容并保存。当然还有其他的方法，只要能让浏览器自动在页面加载完成后执行下面的代码即可。所以也可以建立一个反向代理服务器，转发www.yamibo.com的请求，并在每个HTML响应后加上一个<script>，里面放上这个代码，不过这纯属于杀鸡用牛刀了。

1. 
   
2. // ==UserScript==
   
3. // [url=home.php?mod=space&uid=192264]@name[/url]         Yamibo Script
   
4. // [url=home.php?mod=space&uid=291848]@namespace[/url]    http://tampermonkey.net/
   
5. // [url=home.php?mod=space&uid=121086]@version[/url]      0.0
   
6. // @description  小幅增强百合会网页版观看体验
   
7. // [url=home.php?mod=space&uid=389072]@author[/url]       VoltaXTY
   
8. // [url=home.php?mod=space&uid=286521]@Match[/url]        https://bbs.yamibo.com/*
   
9. // [url=home.php?mod=space&uid=35369]@icon[/url]         http://yamibo.com/favicon.ico
   
10. // [url=home.php?mod=space&uid=147958]@grant[/url]        none
    
11. // @run-at       document-end
    
12. // ==/UserScript==
    
13. let ID = 1;
    
14. const GenerateID = () => {
    
15.     return ID++;
    
16. };
    
17. const HTML = (tagname, attrs, ...children) => {
    
18.     if(attrs === undefined) return document.createTextNode(tagname);
    
19.     const ele = document.createElement(tagname);
    
20.     if(attrs) for(const [key, value] of Object.entries(attrs)){
    
21.         if(value === null || value === undefined) continue;
    
22.         if(key.charAt(0) === "_"){
    
23.             const type = key.slice(1);
    
24.             ele.addEventListener(type, value);
    
25.         }
    
26.         else if(key.charAt(0) === "#" && ele.getAttribute("id") !== null){
    
27.             const type = key.slice(1);
    
28.             persistentEventListeners.set(ele.getAttribute("id"), {type: type, value: value});
    
29.             ele.addEventListener(type, value);
    
30.         }
    
31.         else if(key === "eventListener"){
    
32.             for(const listener of value){
    
33.                 ele.addEventListener(listener.type, listener.listener, listener.options);
    
34.             }
    
35.         }
    
36.         else ele.setAttribute(key, value);
    
37.     }
    
38.     for(const child of children) if(child) ele.append(child);
    
39.     return ele;
    
40. };
    
41. const ParseHTML = (html) => {
    
42.     const t = document.createElement("template");
    
43.     t.innerHTML = html;
    
44.     return t.content;
    
45. }
    
46. const ThreadIDToURL = (tid, page = 1) => {
    
47.     return `https://bbs.yamibo.com/thread-${tid}-${page}-1.html`;
    
48. }
    
49. const FetchThread = async (url) => {
    
50.     let retry = false;
    
51.     do{
    
52.         retry = false;
    
53.         let res = await fetch(url, {
    
54.             credentials: "include",
    
55.         });
    
56.         let text = await res.text();
    
57.         if(text.startsWith("<script")){
    
58.             let jumploc = "";
    
59.             let location = {
    
60.                 get href(){
    
61.                     return jumploc;
    
62.                 },
    
63.                 set href(_){
    
64.                     if(!jumploc) jumploc = _;
    
65.                 },
    
66.                 assign(_){
    
67.                     if(!jumploc) jumploc = _;
    
68.                 },
    
69.                 replace(_){
    
70.                     if(!jumploc) jumploc = _;
    
71.                 }
    
72.             };
    
73.             let window = {
    
74.                 get href(){
    
75.                     return jumploc;
    
76.                 },
    
77.                 set href(_){
    
78.                     if(!jumploc) jumploc = _;
    
79.                 }
    
80.             };
    
81.             const t = document.createElement("template");
    
82.             t.innerHTML = text;
    
83.             const s = t.content.firstElementChild;
    
84.             if(s.tagName === "SCRIPT"){
    
85.                 const _ = s.innerHTML;
    
86.                 try{ eval(_); } catch (error){
    
87.                     console.error(_);
    
88.                     console.error(error);
    
89.                     jumploc = location = "";
    
90.                     retry = true;
    
91.                 }
    
92.             }
    
93.             if(typeof location === "string" && location.length > jumploc.length) jumploc = location;
    
94.             if(jumploc !== ""){
    
95.                 let res2 = await fetch(`https://bbs.yamibo.com${jumploc}`, {
    
96.                     credentials: "include",
    
97.                 });
    
98.                 let text = await res2.text();
    
99.                 return text;
    
100.             }
     
101.         }
     
102.         else return text;
     
103.     }while(retry);
     
104.     return "Should not reach here.";
     
105. }
     
106. const inj_style =
     
107. `
     
108. .zoom{
     
109.     margin: 0px auto;
     
110.     width: auto;
     
111.     height: auto;
     
112.     max-width: 100%;
     
113.     min-width: 50px;
     
114. }
     
115. .zoom[initialized="true"]{
     
116.     width: auto;
     
117.     height: auto;
     
118.     max-width: 100%;
     
119.     min-width: 900px;
     
120. }
     
121. img.zoom{
     
122.     display: block;
     
123.     counter-increment: img-counter 1;
     
124. }
     
125. img.zoom::before{
     
126.     display: block;
     
127.     text-align: center;
     
128. }
     
129. td.plc{
     
130.     counter-reset: img-counter;
     
131. }
     
132. 
     
133. body#nv_forum{
     
134.     min-width: 0px;
     
135. }
     
136. @media(min-width: 900px){
     
137.     .author-id__added{
     
138.         display: none;
     
139.     }
     
140. }
     
141. @media(max-width: 900px){
     
142.     #hd .wp, #wp{
     
143.         min-width: calc(100% - 20px);
     
144.     }
     
145.     div > table[summary] > tbody > tr{
     
146.         display: grid;
     
147.         grid-template-columns: 1fr;
     
148.         width: 100%;
     
149.         max-width: 9999px;
     
150.     }
     
151.     div > table[summary] > tbody > tr:nth-child(1) > td.pls{
     
152.         grid-column: 1/1;
     
153.         grid-row: 1/1;
     
154.         margin-top: 37px;
     
155.         width: 100%;
     
156.         z-index: 1;
     
157.     }
     
158.     div > table[summary] > tbody > tr:nth-child(1) > td.pls > div > div.pi{
     
159.         display: none;
     
160.     }
     
161.     div > table[summary] > tbody > tr:nth-child(1) > td.plc{
     
162.         grid-column: 1/1;
     
163.         grid-row: 1/1;
     
164.         z-index: 0;
     
165.     }
     
166.     .author-id__added{
     
167.         margin-left: 8px;
     
168.     }
     
169.     div.pls.cl.favatar{
     
170.         height: auto;
     
171.         width: auto;
     
172.         display: none;
     
173.     }
     
174.     .favatar-group-top .pi{
     
175.         display: none;
     
176.     }
     
177.     td.pls{
     
178.         visibility: hidden;
     
179.     }
     
180.     .pls.ptn.pbn{
     
181.         visibility: visible;
     
182.     }
     
183. }
     
184. `
     
185. const InsertStyleSheet = (style) => {
     
186.     const s = new CSSStyleSheet();
     
187.     s.replaceSync(style);
     
188.     document.adoptedStyleSheets = [...document.adoptedStyleSheets, s];
     
189. };
     
190. const IsForumPost = () => {
     
191.     const forumview_url = /https:\/\/bbs\.yamibo\.com\/thread-[0-9]+-[0-9]+-[0-9]+\.html/;
     
192.     if(forumview_url.test(location.toString())) return true;
     
193.     if((new URLSearchParams(window.location.search)).get("mod") === "viewthread") return true;
     
194.     else return false;
     
195. }
     
196. const AddPreviewButton = () => {
     
197.     // TODO
     
198.     document.querySelectorAll("#threadlisttableid tbody[id]").forEach((tbody) => {
     
199.         if(tbody.hasAttribute("preview-button-added")) return;
     
200.         else tbody.setAttribute("preview-button-added", "");
     
201.         const id_pattern = /[a-z]+_([0-9]+)/;
     
202.         if(!id_pattern.test(tbody.id)) return;
     
203.         const title_ele = tbody.querySelector(":scope tr th");
     
204.         title_ele.insertAdjacentElement("afterbegin",
     
205.             HTML("td", {class: "preview-button"}, "test")
     
206.         );
     
207.     })
     
208. };
     
209. const ImproveForumPost = () => {
     
210.     if(!IsForumPost()) return;
     
211.     document.querySelectorAll("div[id^="post_"]").forEach((div) => {
     
212.         if(!(/post_[0-9]+/.test(div.id)) || div.hasAttribute("modified")) return;
     
213.         div.setAttribute("modified", "");
     
214.         const tok = GenerateID();
     
215.         const author_id = div.querySelector(":scope .pi .authi .xw1").textContent;
     
216.         const post_content = div.querySelector(":scope .plc");
     
217.         const post_content_header = post_content.querySelector(":scope .authicn");
     
218.         post_content_header.insertAdjacentElement("afterend",
     
219.             HTML("strong", {class: "author-id__added"}, author_id),
     
220.         );
     
221.         const post_content_author = div.querySelector(":scope div.pls");
     
222.         const pcac = post_content_author.children;
     
223.         const group1 = HTML("div", {class: "favatar-group-top"});
     
224.         const group2 = HTML("div", {class: "favatar-group-bottom"});
     
225.         while(!pcac.item(0).classList.contains("pil")) group1.append(pcac.item(0));
     
226.         while(pcac.item(0)) group2.append(pcac.item(0));
     
227.         post_content_author.append(group1, group2);
     
228.     })
     
229. }
     
230. const OnMutation = (mulist, observer) => {
     
231.     observer.disconnect();
     
232.     //AddPreviewButton(...args);
     
233.     ImproveForumPost();
     
234.     observer.observe(document, {subtree: true, childList: true});
     
235. };
     
236. InsertStyleSheet(inj_style);
     
237. new MutationObserver(OnMutation).observe(document, {subtree: true, childList: true});
     

复制代码

题外话，管理版没法编辑帖子真的是硬伤。