关于让浏览器自动刷新

最近有人开发了一个叫 F5 的软件,用来监视某个目录下的文件,当文件改变时刷新浏览器。它非常适合前端开发使用,尤其是多个显示屏时。

我试用了一下这个软件,也大致研究了一下它的实现。它的原理很简单,在本地启动一个 HTTP 服务,将指定的目录作为根目录,开发者可以在浏览器中通过 http://127.0.0.1 访问这个目录下的文件。同时,这个程序会在访问的 html 文件中插入两个 js,如下:

<a href="/con/assets/js/jquery-1.6.3.min.js">/con/assets/js/jquery-1.6.3.min.js</a>
<a href="/con/assets/js/br.js">/con/assets/js/br.js</a>

服务器会监视本地目录上文件的变化,如果文件发生了变化,会通过上面的 br.js 通知页面刷新。于是,实时的刷新功能就完成了。

应该说,这个小软件很有创意,如果使用得当,有时的确能节省很多时间。

不过,由于它需要在本地自己架设一个 HTTP 服务,所有的请求都得通过这个服务,这就也给它带来一些局限,使得它(至少在目前的版本中)只适合用在纯静态页面的开发中。比如我最近经常需要调试 Django 程序的开发,在这类开发中,前端要修改的可能只是一些模板,如果没有后台的数据以及渲染,前端可能很难进行调试,这时,使用它的那个 HTTP 服务就力不从心了。所以,要是能有什么方法,能使用现有的 HTTP 服务,同时在指定目录下的文件发生改变后也能刷新浏览器就好了。

于是我想到了 AutoHotKey (以下简称 ahk)。其实,我们要做的无非两件事:

1、监视文件变化;
2、让浏览器刷新。

监视文件变化比较简单,复杂的是如何让浏览器刷新。上面介绍的软件的实现方式是自己架设 HTTP 服务,然后在页面中插入脚本与服务器通信。但如果使用 ahk 的话,我们好像可以在需要时直接向浏览器发送 F5 消息,这样一来就不需要架设 HTTP 服务了。

例如,下面的 ahk 脚本,即可实现让 IE 当前页面刷新的效果:

; send f5 to IE

IfWinExist, ahk_class IEFrame
{
	ControlSend, , {F5}, ahk_class IEFrame
}

非常简单,如果存在IE窗口(无论这个窗口当前是否获得焦点),向这个窗口发送一个 F5 消息。如果你的电脑上有 ahk 环境,并且打开了一个 IE 窗口,那么运行一下这段脚本,就能发现 IE 窗口被刷新了一次。

ahk 脚本也能被编译为 exe 文件,这样,在没有 ahk 环境的电脑上也能执行。上面的脚本以及它所编译出来的 exe 我在这儿(http://www.everbox.com/f/itPGwFHH5qNCguK5SLAp71mitG)放了一份,有兴趣的同学可以下载到本地试试。

这样,我们就有了一个新的实现文件修改后浏览器实时刷新的方案:以某种方式监视指定目录或文件,满足一定条件时使用 ahk 脚本(或者 ahk 脚本编译出的 exe)向浏览器发送刷新消息。

不过,这种方案也有一些问题,比如 ahk 目前只支持 Windows 平台,所以这个方案也只能在 Windows 下有效。

先写到这里,如果有人想到其它方案,欢迎给我留言。:-)

10 Replies to “关于让浏览器自动刷新”

  1. F5确实还不错,可惜目前只能应付静态页面价值http服务器支持的功能也太少,希望楼主有想法的话去实现这样以个软件吧

  2. 这里有一个现成的监视文件变化的库,可以拿来用。http://www.autohotkey.com/forum/topic45237.html

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s