6
30
2010
1

GM 脚本：转换QQ空间的Javascript链接为普通链接

为什么要访问难用的QQ空间我就不说了，相信各Linuxer能够理解。那为什么要把Javascript链接转换成普通链接呢？因为我喜欢用中键去点链接，让它在新标签页中打开，并且还是在后台打开。这样，在列表页面，我可以用鼠标中键选取自己感兴趣的链接，全部打开，选完好基本上第一篇也就加载好了，不需要等待加载。

无奈QQ空间特别喜欢使用Javascript，以至于我以为QQ空间里的文章都没有可以指向它的URL。后来看到QQ空间支持RSS了，才发现原来每篇文章都是有ID的，像这样可以访问：http://QQ号.qzone.qq.com/blog/文章ID。于是，此问题有解！

拿Firebug查看下就可以知道文章ID如何获取，然后利用强大的GreaseMonkey写个脚本转换之。思路很简单，但做起来还是遇到了点小问题——貌似在页面加载完毕之前脚本就已经执行过了。怎么办呢？我首先想到了延时，但觉得不太好控制。无意中在GreaseMonkey的右键菜单项中看到了“用户脚本命令”一项，遂Google之，获得此文。于是就用这个了，虽说每次要先去点下这个菜单项有点麻烦，但毕竟我QQ空间看得不是很多，而且这比之前要省事不少。好了，贴代码：

// ==UserScript==
// @name           QQ空间链接转换
// @namespace      http://lilydjwg.is-programmer.com/
// @description    将QQ空间链接从Javascript转换到普通链接
// @include        http://*.qzone.qq.com/*
// ==/UserScript==

var changeLinks = function(links){
  for(var i=0, len = links.length; i<len; i++){
    var link = links[i];
    if(link.href == 'javascript:;'){
      var id = link.getAttribute('onclick').match(/\d+/)[0];
      link.href = 'http://' + window.location.host + '/blog/' + id;
      console.log(link.href);
    }
  }
}

var do_it = function(){
  try{
    var links = document.getElementById('tblog').contentDocument.getElementsByClassName('blog_link');
    changeLinks(links);
    var links = document.getElementsByClassName('tx_fix');
    changeLinks(links);
  }catch(e){
    GM_log(e);
  }
}

GM_registerMenuCommand("转换js链接", do_it, '', '', 'j');

点击此处安装。

Category: 火狐 | Tags: javascript QQ 火狐 GreaseMonkey 腾讯
4
4
2010
0

用 jQuery 写了个给页面链接加上提示的小书签

已经不记得是怎样发现Learning jQuery这个博客了。首先看到的是关于在网页中加载 jQuery的几篇博文，非常不错，而且改进后的版本挺人性化的。所给链接上有小书签的链接，这里这不再给出了（不懂e文的童鞋请在页面上搜索“jQuerify”）。

觉得这个博客非常不错，当然不能看完一走了之了。于是订阅之，然后就发现了这个简单的jQuery插件——eztip，这里有作者写的demo，效果图如下：

点击这里，然后把鼠标移到本页的链接上，你也可以看到类似的提示哦！

这是所用到的代码，很简单呵：

$(document).ready(function() {
  $('.tips').eztip('a', {contentAttrs: ['title','href'], opacity: .75});
});

样式还得自己定义一下：

.simple-tip { position: absolute; background-color: #cec; border: 1px solid #393; padding: 6px;}

这个插件有点小问题：当链接位于页面右边缘或者下边缘时，提示仍然会出现在右下方（或者你定义的其它位置），造成出现滚动条并且看不到提示的情况。

不过，既然能在任意页面通过小书签加载 jQuery，何不通过小书签把这个提示也加上呢？于是，仿照 jQuerify 小书签，我自己也写了一个给链接加上提示的小书签。调试它花了我一个小时左右呢，这还是有Vim和jsbeautify这个清理 Javascript 的 Vim 插件的帮助的情况下。注意，使用前要先确定页面已加载 jQuery，如果网页没有使用 jQuery 的话就用上面介绍的小书签啦。下面给出这个小书签的代码：

javascript: (function() {
  var el = document.createElement('div'),
  b = document.getElementsByTagName('body')[0];
  msg = '';
  el.style.position = 'fixed';
  el.style.height = '32px';
  el.style.width = '220px';
  el.style.marginLeft = '-110px';
  el.style.top = '0';
  el.style.left = '50%';
  el.style.padding = '5px 10px 5px 10px';
  el.style.zIndex = 1001;
  el.style.fontSize = '12px';
  el.style.color = '#222';
  el.style.backgroundColor = '#f99';
  if (typeof jQuery == 'undefined') {
    msg = 'This page is not using jQuery, sorry!';
    return showMsg();
  }
  function getScript(url, success) {
    var script = document.createElement('script');
    script.src = url;
    var head = document.getElementsByTagName('head')[0],
    done = false;
    script.onload = script.onreadystatechange = function() {
      if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
        done = true;
        success();
      }
    };
    head.appendChild(script);
  }
  getScript('http://plugins.learningjquery.com/eztip/jquery.eztip.js', function() {
    jQuery('body').eztip('a', {
      contentAttrs: ['href', 'title'],
      opacity: .9
    });
    jQuery('.simple-tip').css({
      position: 'absolute',
      zIndex: 9999,
      backgroundColor: '#cec',
      color: '#131',
      border: '1px solid #393',
      padding: '6px'
    });
    msg = 'link tip ready!';
    return showMsg();
  });
  function showMsg() {
    el.innerHTML = msg;
    b.appendChild(el);
    window.setTimeout(function() {
      if (typeof jQuery == 'undefined') {
        b.removeChild(el);
      } else {
        jQuery(el).fadeOut('slow', function() {
          jQuery(this).remove();
        });
        if (otherlib) {
          $jq = jQuery.noConflict();
        }
      }
    },
    2500);
  }
})();
Category: Javascript | Tags: javascript jquery 小书签 网页

Mastodon | Theme: Aeros 2.0 by TheBuckmaker.com