支持多浏览器的网站变灰方法

这篇文章中给出了针对 IE 浏览器的使网站变灰的方法,具体做法是在 CSS 文件的开头添加这样一行:

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

但是很遗憾这种方法并不能支持 Firefox 和 Chrome。这篇博客介绍一种支持各种浏览器的网站变灰方法,试验其支持 Firefox、Chrome 和 IE,据说可以支持 Opera(未测试),方法比较简单,就直接介绍步骤了。

1. 到这里下载 grayscale.js 文件到你网站的根目录(或者也可以不下载,直接引入该 js,未测试)。

2. 在网站的 footer 或者 header 等全局的文件中插入以下代码(注意,$() 和 .load handler需要 jquery.js 的支持,不使用 jquery 的同学可以自行搜索解决标签查找和 window onload 事件处理问题,例如这里这里):

<script type="text/javascript" src="/grayscale.js"></script>
<script type="text/javascript">
$(window).load(function () {
  grayscale( $('body') );
});
</script>

该方法的缺点是:

1. 页面加载完后才对整个页面进行变灰操作;
2. 在非 IE 浏览器中不支持来自其它域名的网站图片的变灰;
3. 造成非 IE 浏览器在加载完页面后进行大量 js 计算,该计算负担可以通过仅变灰 img, a 等标签而不是 body 来优化。

浏览器自动选择 Proxy 配置案例

本文主要讨论的是浏览器代理服务器设置技术,文中出现的人名、公司名或者域名均为化名,如有雷同,纯属巧合。

在某些地方上网时,比如南京大学的校园网中,某些公司的局域网中,我们可能需要用到代理服务器。代理服务器的切换一直是一个让人头痛的话题,IE 浏览器有一个 ProxySwither Lite 软件可以用来切换代理,Firefox 有一批插件可以用来切换代理,但是,很难用它们来解决全局性的问题,使用前的配置也是比较麻烦的事情。那么,有没有一种方法可以一劳永逸地解决这个问题呢?答案是有的,那就是 PAC(Proxy Auto-Config) 文件。

使用 PAC 文件我们可以做到:1. IE、Firefox、Opera...浏览器使用同一个代理配置方案,Windows、Linux多系统使用同一个代理配置方案;2. 针对特定的域名,使用特定的代理;3. 针对特定的 IP 范围,使用特定的代理;4. 针对特定的 URL 模式,使用特定的代理。

下面我们来看一个案例:

假设小明的电脑位于 C 公司的局域网中,C 公司为了某些需要禁止员工访问某些站点,例如: alogspot.com 和 bwitter.com ,但是小明的工作和学习需要经常访问这些站点,公司的网管给小明带来了很大不便。不过小明很聪明,他找到了一个可以访问被禁那些站点的一个代理 127.0.0.1:8000。虽然通过该代理小明可以访问这些站点,但是切换代理和浏览器设置始终是麻烦;特别是在用 doogle.com 搜索到的某些文章位于 alogspot.com 时,一不小心点了搜索结果,到搜索引擎 doogle.com 的连接就会有很大一会儿被重置。因为小明的代理速度比较慢,总不能用代理上所有网站吧?这真是件麻烦事,小明该怎么办呢?

虽然很头痛,但是互联网的开拓者们给我们留下了那么多遗产,怎么能不好好利用呢?小明翻出了一个尘封已久的 Wiki 页面,缓缓回忆起那古老的 Javascript 语言,顿时有了主意,于是他写出了下面这个 PAC 脚本:

// 看看域名是不是本地站点
function isLocalHost(host)
{
  if( dnsDomainIs(host, "localhost") )
    return true;
  return false;
}
// 看看域名是不是禁止访问的站点
function isBlockedHost(host)
{
  if( dnsDomainIs(host, "alogspot.com") ||
      dnsDomainIs(host, "bwitter.com") )
    return true;
  return false;
}
// 看看搜索结果 URL 中是不是包含被禁止访问的关键字
function isBlockedURL(url, host)
{
  if( dnsDomainIs(host, "doogle.com") ) {
    if ( shExpMatch(url, "*alogspot.com*") ||
         shExpMatch(url, "*bwitter.com*") )
      return true;
  }
  return false;
}
// 看看 IP 在不在本地 IP 范围内
function isLocalIP(addr)
{
  if( isInNet(addr,"127.0.0.0","255.0.0.0") ||
      isInNet(addr,"10.0.0.0","255.0.0.0") ||
      isInNet(addr,"192.168.0.0","255.255.0.0") ||
      isInNet(addr,"172.16.0.0","255.255.0.0") )
    return true;
  return false;
}
// 看看 IP 在不在被禁止访问的 IP 范围内
function isBlockedIP(addr)
{
  return false;
}
// 看看 IP 地址是不是 IPv6 地址
function isIPV6(addr)
{
  if( shExpMatch(addr, "*:*") )
    return true;
  return false;
}
// 这是浏览器默认调用的函数接口
function FindProxyForURL(url, host)
{
  var direct      = "DIRECT";
  var httpProxy   = "PROXY localhost:8000";
  var socksProxy  = "SOCKS localhost:9050"// 留着做个参考
 
  if(isLocalHost(host)) {
    // 如果是本地域名,那就直连
    return direct;
  } else if(isBlockedURL(url, host) || isBlockedHost(host)) {
    // 如果是被禁止访问的域名,或者搜索结果 URL 中含有被禁止访问的关键词,那就走代理
    return httpProxy;
  }

  if(!isResolvable(host)) {
    // 如果域名不能解析,那就直连
    return direct;
  }
  // 解析域名到 IP 地址
  var IpAddr = dnsResolve(host);

  if(isLocalIP(IpAddr) || isIPV6(IpAddr)) {
    // 如果是本地 IP 或者 IPv6 地址,那就直连
    return direct;
  } else if(isBlockedIP(IpAddr)) {
    // 如果是被禁止访问的地址,那就走代理
    return httpProxy;
  } else {
    // 剩下的,唉,就直连吧
    return direct;
  }
}

小明将以上内容保存为 C:proxy.pac(~/proxy.pac),然后到

Firefox 中,选择 工具->选项->高级->网络->设置(Edit->Preferences->Advanced->Network->Settings),将 file:///c:/proxy.pac(file:///home/username/proxy.pac)填入“自动代理配置 URL”(Automatic proxy configuration URL)文本框中;

再到

IE 中,选择 工具->Internet 选项->连接->局域网设置,勾选使用自动配置脚本,填入 file://c:/proxy.pac;

再到

Opera 中,选择 Tools->Preferences->Advanced->Network->Proxy Servers,勾选上 Use automatic proxy configuration,填入 file://c:/proxy.pac。

从此,小明就开始了自己幸福的互联网冲浪生活,再也没有看到那曾经熟悉的“到该网站的连接已被重置”消息了。

PS:若要 Firefox 和 Chrome 支持远端 DNS 解析,需使用 SOCKS5 作为代理的前缀。

Solrex的新年礼物

我的Space也开半年了,这半年从羞于谈起到和朋友们很自然的交流,从当初的周访问量不超过十到现在的日均访问量到了十以上(呵呵,不好意思也不多,但是有人看已经很满足了)。朋友们的关心这里很感激啦,所以这不该过年了,送大家一个小礼物吧!

相信大家都有Chinaren的校友录吧。

If    你是管理员

恭喜你,中大奖了

Goto Part1;

Elseif    你是普通班级成员

恭喜你,也有奖

Goto Part2;

Elseif    你没有Chinaren帐户

RP也太低了吧!算了,我也帮不了你。

Return;

End

Part1:管理员篇(让你的祝福图片/Flash盖住SOHU的广告,或者跳出窗口祝福。)

嘿嘿,如果你想公开在全班面前向MM表白,我也拦不住哈。图片/Flash内容你自己确定,我这里可只是说给大家送祝福。

1.  1.进入自己的班级后, 点击"班级管理"按钮

2.   2.在“班级宣言”部分, 点击“文本编辑方式”

3.   3.在编辑框输入附件部分的代码

4.   4.回到班级首页

[效果]

我的班级

[附件]
附件代码很多可以自由设定显示位置, 若你想覆盖更多, 请自行增加或调整长度/宽度/左/顶部定位等等.这里的位置是绝对位置,就是你打开网页的页面的位置,所以你的窗口大小会影响这个图片的位置.不过可以自己调整,不知道百分比可以用吗?没有尝试.

A. 头部播放Flash代码

<EMBED style="LEFT:120px; position:absolute; TOP:56px;" src=”你要播放的Flash文件,swf格式” width=760 height=105 type=application/x-shockwave-flash;quality="high">
要点: 定位 左:120像素 顶: 56像素 宽: 760像素 高:105 像素

B. 头部显示自己喜欢的图片代码

<div style="LEFT:120; position:absolute; TOP:56px;"><img src=”图片地址” width=760px height=105px alt="XXX祝您圣诞快乐"></div>
要点: 定位 左:120像素 顶: 56像素 宽: 760像素 高:105 像素 alt属性可以去除

C. <Iframe>标签调用第三方网页
<IFRAME style="WIDTH: 320px; HEIGHT: 300px" src="你想调用的网页,htm格式" scrolling=no>

D. 弹出窗口代码
<IFRAME style="WIDTH: 0px; HEIGHT: 0px" src="你想调用的网页,htm格式" scrolling=no>

E. 代码很多 创意更多 大家自己去玩拉 因为连position:absolute;和iframe都给你了。还有什么不能的?

[FAQ]:懂网页设计的就别看了,不懂的这里解释一下

1.在网页里播放的FLASH文件只能是SWF格式,懂的人都知道,但是要是盖住广告需要横向长度比较长的FLASH,这个要注意,不然很难看。

2.如果放图片的,可以自己做,记住长760像素,宽56像素,这是SOHU的广告条长度。如果不会做,打开Photoshop,新建图片,长宽设置好,随便涂点颜色,写几个字,然后存储为GIF格式。

3.IFREAME就不说了,估计能看懂这个词什么意思的家伙,也不需要我教。

4.不知道FLASH和图片放在哪里?我只能怀疑你的智商,如果是南大的家伙,有百合帐号吧,知道百合信箱能上传文件吧,然后把上传后给你的地址贴在src=后面那个引号里面就行了,替换掉那几个汉字哈。如果不是南大,你总有个BBS或者什么网络硬盘网络相册等等一些地方能上传文件吧。用老罗的话说,几样你总得沾一样吧,不然怎么混那。

5.如果使用百合的地址,注意了,把bbs.nju.edu.cn改成lilybbs.net,这样速度比较快。还有,不建议使用SPACE的图片地址,因为它是外网,你总不想教育网内的同学什么都看不见吧。

Part2:非管理员篇(非星级会员照样发布多彩文本留言

1. 点击"班级共享"按钮
2. 选择"添加文件"
3. 选择"添加链接" [其他也可以, 随便] 并胡乱输入信息

4. 点击"添加共享"按钮
5. 回到班级首页, 在班级留言部分选择"我要留言"
6. 在刚刚发布的"我刚刚在班级共享上传了一个好东东"项, 选择"编辑留言"图标

7. 删掉这个信息, 现在可以自由的多彩留言啦!

[注] 好像最近发现“我刚刚在班级共享上传了一个好东东”没有了,大家看着办吧,如果还有的话,你真幸运。

[PS]:本篇文章感谢Belem发现的技巧,主要引用自他的Blog,但有修改补充。出于自己的小私心,嘿嘿,既然是借花献佛,主人还是神秘些为好,就不给链接了。

还有,我可不希望这篇文章被转载到百合,要知道百合的信息流动速度,今天你转上去了,明天可能SOHU就封了,就没的搞了嘛。多没意思。还有,就算SOHU不封,那么多人知道,当你用的时候就会有人给你说,切,老把戏了还在玩。你爽啊?

还有,不建议在IFREAM里面调用网页木马,如果有人这样做,实在非此文章本意,做人要厚道,同学也坑就太损了。不过也给大家提个醒,没什么网页是安全的,所以,不要有什么信任站点,也不要随便点开链接。

好了,祝大家玩得开心,新年快快乐乐,小日子过得滋滋润润。