[JS]玩轉博客園的幾個「奇技淫巧」

時間 2019-11-13

原文原文鏈接

混跡博客園快一個月了，很是喜歡這塊技術氛圍濃厚的園地，不過在玩轉園子的過程當中也發現了幾個小缺陷，不過好在申請了JS權限以後能夠解決大部分的不方便，而在不能植入自定義JS的頁面也能夠用比較hack的方式來緩解問題。本文就來講一說我這一個月來碰到的幾個問題以及解決之道：D

javascript

1、判斷當前用戶css

寫隨筆的過程當中可能常常須要對頁面進行一下預覽，然而編輯器的預覽功能沒辦法帶上自定義的CSS和JS，因此一般都得保存草稿而後查看隨筆。預覽完以後想要繼續編輯的話就得一直拉到隨筆的結尾，這個實在是不太方便，因而天然就會想到本身加一個位置不那麼尷尬的編輯按鈕。
這個時候問題就來了，編輯按鈕顯然是隻有我本身用得着，若是隨意地在頁面上加按鈕對看客們的體驗會形成很差的影響，因此就得判斷一下當前登陸的用戶是否是我本身啦。html

在這個問題上我一開始饒了很大的彎，不論是AJAX博客園首頁仍是「http://passport.cnblogs.com/user/LoginInfo」都宣告失敗，前者右上角的用戶名是異步請求了後者再加載上的，而直接AJAX請求後者會遇到跨域權限的問題。後來又試着用iframe套首頁來取用戶名，可是又嫌棄這個方法太影響頁面加載速度。最後纔想起來，評論框的最上面就有用戶名。。。囧前端

找到這個地方有用戶名以後又遇到了一堆問題，由於這些數據都是異步加載的，想直接在JS裏取值還不必定取獲得。
結果最終就寫了一大堆的JS來解決這個問題：java

 1 // 編輯
 2 var editUrl, checked = false;
 3 function doWidthEditBtn() {
 4     var profile = $("#profile_block");
 5     var cmtFrmContainer = $("#comment_form_container");
 6     if (!checked &&
 7             (!profile.length
 8             || !profile.children("a").length
 9             || !cmtFrmContainer.length
10             || !cmtFrmContainer.children().length)) {
11         setTimeout(doWidthEditBtn, 100);
12         return;
13     }
14     checked = true;
15 
16     // 評論者名
17     var cmtAuthorIpt = $("#tbCommentAuthor");    
18     if (!cmtAuthorIpt.length) {
19         // 登陸按鈕
20         if (!cmtFrmContainer.children(".login_tips").length) {
21             setTimeout(doWidthEditBtn, 100);
22             return;
23         }
24     } else {
25         // 做者名
26         var author = profile.children("a")[0].innerHTML;
27         var commentAuthor = cmtAuthorIpt.val();
28         if (author == commentAuthor) {
29             // 追加按鈕的代碼其實就這麼一小塊。。。
30             var editBtn = $("<a href='" + editUrl + "'>");
31             editBtn.append("<div class='vd-menu-item'>編輯</div>");
32             $("#vd-right-menu").append(editBtn);
33         }
34     }
35 }
36 $("body").ready(function () {
37     var editLink = $("a[href^='http://i.cnblogs.com/EditPosts.aspx?postid=']");
38     // 非首頁
39     if (editLink.length == 1) {
40         editUrl = editLink.attr("href");
41         doWidthEditBtn();
42     }
43 });

相信確定是有更好的解決辦法的，惋惜我並不擅長前端開發與優化，要是有精於此道的高手看到還望不吝賜教：D跨域

2、自定義樣式切換瀏覽器

博客園給了博主很是高的自由度，其中一塊權限就是自定義CSS樣式。然而並不是每個博主都擅長於頁面設計與美化(好比我。。。)，並且園友們的審美也不盡相同。
從這一篇隨筆的評論中就能看出來，很多讀者不太喜歡我用來護眼的背景色，估計他們當時就在想怎麼把我這自定義的背景給去掉。。。既然博客園沒有提供這個切換的功能，那就只能本身來作一個啦：Dapp

最終效果也就是如今頁面頂端的「BG」按鈕，每點一次這個鈕就會讓定義了背景色的CSS在失效和生效間切換。
我是這麼寫的：異步

// background-color
var isNormalBg = getCookie("vd-bg-normal") == "1";
var link = $("<link id='bgColorStyle' type='text/css' rel='hacked'>")
    .attr("href", "http://files.cnblogs.com/files/vd630/background-color.css")
    .appendTo("head");
var normalBg = "rgba(255, 255, 255, 0.5)";
var customBg = "rgba(100, 150, 40, 0.5)";

if (!isNormalBg)
    link.attr("rel", "stylesheet");
$("<div>BG</div>").css({
    "background-color": isNormalBg ? normalBg : customBg,
    "width": "20px",
    "height": "20px",
    "line-height": "20px",
    "text-align": "center",
    "position": "fixed",
    "left": "50%",
    "top": "10px",
    "cursor": "pointer",
    "border": "2px solid black",
    "border-radius": "10px"
}).click(function () {
    isNormalBg = !isNormalBg;
    if (isNormalBg) {
        link.attr("rel", "hacked");
        this.style.backgroundColor = normalBg;
        setCookie("vd-bg-normal", "1");
    } else {
        link.attr("rel", "stylesheet");
        this.style.backgroundColor = customBg;
        setCookie("vd-bg-normal", "0");
    }
}).appendTo("body");

想要失效就把link的rel設置成一個瀏覽器不認識的值，想要生效就設置回"stylesheet"。
爲了切換一部分而不是全部的自定義樣式，我把定義背景色的這塊單獨放到了一個CSS文件裏，一樣的作法也能夠實如今多個不一樣的樣式之間切換哦：D

編輯器

3、切換別人的樣式

基於上一個問題的需求，對別人的頁面樣式看不順眼，可是博主又不像我這麼善解人意怎麼辦？：D
固然，我不想也不會黑掉別人的頁面，博客園又不可能讓我在別人的頁面定義JS，又要方便地切換默認樣式和自定義樣式，我就只能想到一條路可走了：

地址欄腳本注入 + 收藏夾書籤

具體的JS以下：

javascript:
var style = $("link[rel='hacked']");
var pattern = new RegExp("/blog/customcss/|files.cnblogs.com");
if (style.length)
    style.attr("rel", "stylesheet");
else {
    var links = $("link");
    for (var i = 0; i < links.length; i++) {
        if (pattern.test(links[i].href))
            links[i].rel = "hacked";
    }
}
void(0);

經過識別自定義CSS樣式的路徑和來自files目錄的CSS文件，對這些元素作了一樣的hack。
須要注意，最後一行的void(0)是必須的，否則任何有返回值的語句都將致使頁面跳轉。

把上面的這段JS放到瀏覽器的書籤裏，就像這樣：

保存之後在別人的頁面裏也能夠經過這個書籤來切換樣式啦~
不過須要注意的是，雖然能夠去掉自定義的樣式，可是那些自定義的元素但是去不掉的，最終致使什麼樣的效果就說很差了：D

4、鎖定隨筆編輯頁面

寫隨筆的時候有一件事比較鬧心，文章拖到最後滾輪再往下走的時候，整個頁面就會往下翻了，就像這樣：

全屏模式又常常在編輯HTML和插入代碼後出bug，因此要是能把普通模式下的滾動條去掉就行了。
固然無法在編輯頁面自定義JS，因此仍是得靠書籤：D

javascript:
var bodyStyle = document.body.style;
if (bodyStyle.overflow == "hidden")
    bodyStyle.overflow = "visible";
else
    bodyStyle.overflow = "hidden";
void(0);

保存好這個書籤之後只要調整到本身喜歡的位置，而後只需click這個書籤就能夠鎖住文本框不讓它亂滾了：D
解鎖也只需再點一次就好了~

5、轉載文章

博客園雖然有「文章」用於轉載別人寫的內容，卻沒有提供方便的轉載手段，而手動複製頁面裏的內容又實在太不方便。
不要緊，咱們能夠經過書籤來幫忙：D

javascript:
if ($("textarea#copy-essay").length)
    $("textarea#copy-essay").remove();
else
    $("<textarea id='copy-essay'>")
        .appendTo("body")
        .val("<p>原文地址: <a href='" + location + "'>" + location + "</a></p><br/>" + $("#cnblogs_post_body").html())
        .css({
            "position": "fixed",
            "left": "5%",
            "top": "5%",
            "width": "90%",
            "height": "90%"
        })
        .select();
void(0);