苦逼前端

url中的#

Javascript2014-04-11 00:45

最初看见这东西,是在网页定位的时候。比如我想让网页一打开就定位在某个位置,我会在url后面添加一个#aaa,然后网页打开的时候,会自动跳转到id为aaa的元素的位置,那时候我们叫它'锚点'。

最近做的项目中,差不多是一个类似于百度网盘的项目吧,在打开一些带#的文件的时候,会提示无法找到该资源。在服务器端监听请求会发现,后端接收到的数据请求,只是#之前的内容。比如,请求这个地址: http://xwenliang.cn/aaa#aa.txt, 服务器端接收到的请求只是: http://xwenliang.cn/aaa

那么这个#到底是用来干啥的呢?为什么浏览器的请求会忽略掉它后面的内容呢?

通过上面的内容,我们了解到,这个#,其实只是用于定位网页的显示位置的(指导浏览器行为),与服务器数据无关。所以浏览器在发出数据请求的时候,会忽略掉它和它后面的内容。

那么如果我就是想要发送一个带#的请求,怎么破?

可以试试encodeURIComponent(encodeURI是不会对#进行转译的),他会将#转译为%23。后端在接收到%23时,会将它还原为#,从而绕过浏览器恶心的默认行为。

类似的还有?、&等,当他们出现在url中的时候,都有自己特殊的含义。如果不想被浏览器解析为特殊含义的话,都需要自己手动转译一下。

在webapp兴起的时代,#还有更有用的地方。由于它可以让浏览器产生历史记录,从而可以利用它来标记浏览器的某一时刻的状态。通过检测#后面的内容(onhashchange,低版本IE浏览器需要轮询),发起相应的ajax请求,来还原某一时刻浏览器的状态。实现页面无刷新加载数据保持状态。

ajax异步交互数据,虽然会带来相对较好的用户体验,但这会阻碍搜索引擎爬虫对内容的爬取。但是如果希望让google爬虫爬取到动态加载的数据,可以使用#!这个特殊符号组合。google爬虫会将其后的内容转成查询字符串_escaped_fragment_的值。

比如,如果google爬虫爬取到一个地址: http://xwenliang.cn/#!/list, 它会自动将地址转为: http://xwenliang.cn/?_escaped_fragment_=/list

通过这种方式,可以让google爬虫爬取到单页面webapp的一些数据。

评论(2)
  • 124.127.99.*: a1年8个月前
  • 124.127.99.*: 我没登陆就可以评论吗,这么神奇!1年8个月前
还可输入200个字