[JS]玩转博客园的几个“奇技淫巧”

[JS]玩转博客园的几个“奇技淫巧”

混迹博客园快一个月了，非常喜欢这块技术氛围浓厚的园地，不过在玩转园子的过程中也发现了几个小缺陷，不过好在申请了JS权限之后可以解决大部分的不方便，而在不能植入自定义JS的页面也可以用比较hack的方式来缓解问题。本文就来说一说我这一个月来碰到的几个问题以及解决之道：D

一、判断当前用户

写随笔的过程中可能经常需要对页面进行一下预览，然而编辑器的预览功能没办法带上自定义的CSS和JS，所以通常都得保存草稿然后查看随笔。预览完之后想要继续编辑的话就得一直拉到随笔的结尾，这个实在是不太方便，于是自然就会想到自己加一个位置不那么尴尬的编辑按钮。这个时候问题就来了，编辑按钮显然是只有我自己用得着，如果随意地在页面上加按钮对看客们的体验会造成不好的影响，所以就得判断一下当前登录的用户是不是我自己啦。

在这个问题上我一开始饶了很大的弯，不管是Ajax博客园首页还是“http://passport.cnblogs.com/user/LoginInfo”都宣告失败，前者右上角的用户名是异步请求了后者再加载上的，而直接AJAX请求后者会遇到跨域权限的问题。后来又试着用iframe套首页来取用户名，但是又嫌弃这个方法太影响页面加载速度。最后才想起来，评论框的最上面就有用户名。。。囧

找到这个地方有用户名之后又遇到了一堆问题，因为这些数据都是异步加载的，想直接在JS里取值还不一定取得到。结果最终就写了一大堆的JS来解决这个问题：

 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.length10             || !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

二、自定义样式切换

博客园给了博主非常高的自由度，其中一块权限就是自定义CSS样式。然而并非每一个博主都擅长于页面设计与美化(比如我。。。)，而且园友们的审美也不尽相同。从这一篇随笔的评论中就能看出来，不少读者不太喜欢我用来护眼的背景色，估计他们当时就在想怎么把我这自定义的背景给去掉。。。既然博客园没有提供这个切换的功能，那就只能自己来做一个啦：D

最终效果也就是现在页面顶端的“BG”按钮，每点一次这个钮就会让定义了背景色的CSS在失效和生效间切换。我是这么写的：

// background-colorvar 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

三、切换别人的样式

基于上一个问题的需求，对别人的页面样式看不顺眼，但是博主又不像我这么善解人意怎么办？：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

四、锁定随笔编辑页面

写随笔的时候有一件事比较闹心，文章拖到最后滚轮再往下走的时候，整个页面就会往下翻了，就像这样：

全屏模式又经常在编辑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解锁也只需再点一次就行了~

五、转载文章

博客园虽然有“文章”用于转载别人写的内容，却没有提供方便的转载手段，而手动复制页面里的内容又实在太不方便。没关系，我们可以通过书签来帮忙：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);

当点击这个书签之后，只需要按下Ctrl+C就可以轻松复制下文章的HTML啦，再接下来贴到“HTML源码编辑器”里就行了~再次点击就能把文本域给移除了~

用上这些小技巧之后感觉博客园更顺手了：D最后希望博客园能越做越好，让这些尴尬的问题不再出现就好~