一年多以前,我们开发这个博客的时候做了个bgm播放器,为了在用户点击链接的时候不会产生跳转(会导致bgm停止),我们人为的通过js屏蔽掉连接的跳转,然后通过ajax获取网页内容再通过innerHTML来修改呈现内容,但是这样做别人在点了连接后地址栏里面的地址并不会变化,如果想分享给好友,还不能直接从地址栏复制,于是我们采用了一种类似命名锚的方式来实现。我们把路径(相对网站根目录)写到“#”后面,这样路径信息就保留下来了,因为浏览器认为访问的内容在页面内,也就不会刷新和跳转了。这种方案在一些其他网站上也有用到,不过不是太常见,因为它对搜索引擎不友好——搜索引擎无法执行js代码,也就获取不到任何的内容。
出于这个原因,我们设立了普通的入口供蜘蛛爬取,然后如果是能执行js的浏览器访问,就会由js重定向到带bgm播放器frame页面。当然啦,考虑到目前背景音乐播放的控制做的不好,服务器又慢,整体上的效果一般,我们取消了自动跳转(不过其实代码都还没删除呢),把这个问题放到一边。
前几天无意间发现微博上也有了背景音乐播放器,而且点击链接url改变但bgm不会停,于是感觉到是不是又有新技术了(虽然qq空间早就有这样的效果,不过那是通过插件实现的,我不可能为我的网站也开发一个,何况让别人装上再来访问我们的网站的可能性几乎为0,就是我本人也讨厌各种插件)。于是我重新搜索了一下,果然有了(或许早就有了,只是我没发现),HTML5中提供了一个函数:history.pushState(state, title, url) (具体使用方法可以自行查阅,不过目前查到的实际使用案例还是很多,不过它的各个参数的讲解倒是还没看到)。通过这个方法,可以向访问历史中插入一条数据,这样url就变了,但是这是不会刷新的(已测试可以使用,不过后退时也不会刷新,只要能监听刷新动作大概就可以做到)。另外我们应该也会在近期在主站的浏览器检测中增加这个函数支持的检测。