URL中 # (井号)的作用

最新推荐文章于 2022-02-15 14:44:35 发布

努力努力再努力m_

最新推荐文章于 2022-02-15 14:44:35 发布

阅读量6.4k

点赞数

分类专栏： web网站 Jquery Html 文章标签： Jquery html url

本文链接：https://blog.csdn.net/u013344860/article/details/79229269

版权

Jquery 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

web网站

5 篇文章 0 订阅

订阅专栏

Html

5 篇文章 0 订阅

订阅专栏

1、井号在URL中指定的是页面中的一个位置

井号作为页面定位符出现在URL中，比如：http：//localhost:8080/home/index.html#scroller-pullUp，此URL表示在页面index.html中scroller-pullUp的位置。浏览器读取这个URL后，会自动将scroller-pullUp位置滚动至可视区域。

在页面上添加锚点的方法为：<input name="XXX">或<div id=”scroller-pullUp”>。

显示到指定位置的方法：

step1：设置一个锚点<a href="# scroller-pullUp">定位到 scroller-pullUp位置</a>step2： http：//localhost:8080/home/index.html#scroller-pullUp

2、井号后面的数据不会发送到HTTP请求中

#是用来指导浏览器产生行为的，对服务器端完全没用
比如，访问下面的网址，http：//localhost:8080/home/index.html#scroller-pullUp，浏览器实际发出的请求是这样的：http：//localhost:8080/home/index.html

3、任务位于井号后面的字符都是位置标识符

不管第一个井号后面跟的是什么参数，只要是在井号后面的参数一律看成是位置标识符。这意味着，这些字符都不会被发送到服务器端。
比如，下面URL的原意是指定一个颜色值：http：//localhost:8080/home/index.html?color=#fff，但是，浏览器实际发出的请求是http：//localhost:8080/home/index.html

4、改变井号后面的参数不会触发页面的重新加载但会增加一条历史记录

仅改变井号后面的内容，只会使浏览器滚动到相应的位置，并不会重现加载页面。

比如从http：//localhost:8080/home/index.html#scroller-pullUp到http：//localhost:8080/home/index.html#page，浏览器并不会去重新请求页面，但是此操作会在浏览器的历史记录中添加一次记录，即你可以通过返回按钮回到上次的位置。这个特性对Ajax来说特别的有用，可以通过设置不同井号值，来表示不同的访问状态，并返回不同的内容给用户。（注：在IE6和IE7下井号的改变不会增加历史记录。）

5、可以通过javascript使用window.location.hash来改变井号后面的值

window.location.hash这个属性可以对URL中的井号参数进行修改，基于这个原理，我们可以在不重载页面的前提下创造一条新的访问记录。HTML 5新增的onhashchange事件，当#值发生变化时，就会触发这个事件。

（应用:1、用户下单时，选择自提或包邮时的收货地址的改变，利用的是windows.location.hash判断的值。2、百度翻译中如http://fanyi.baidu.com/?aldtype=85#en/zh/engine，也是通过hash来记录的）

6. Google抓取#的机制

默认情况下Google在索引页面的时候会忽略井号后面的参数，同时也不会去执行页面中的javascript。然而谷歌为了支持对Ajax生成内容的索引，定义了如果在URL中使用“#!”，则Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

比如最新的twitter URL：http://twitter.com/#!/username，Google会自动请求http://twitter.com/?_escaped_fragment_=/username来获取Ajax内容。

通过这种机制，Google就可以索引动态的Ajax内容。

7.onhashchange事件

这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种：

1.window.onhashchange = func;

2.<body οnhashchange="func();">

3.window.addEventListener("hashchange", func, false);

扩展：页面初始化时路径中添加hash

<script type="text/javascript">
$(function() {
	var href = location.href;
	var hash = window.location.hash;
	if(hash =="#bottom-div"){
		window.location.href = href;
	}else{
		window.location.href = href+"#bottom-div";
	}
	
})
</script>

努力努力再努力m_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
URL中 # (井号)的作用

1、井号在URL中指定的是页面中的一个位置井号作为页面定位符出现在URL中，比如：http：//localhost:8080/home/index.html#scroller-pullUp，此URL表示在页面index.html中scroller-pullUp的位置。浏览器读取这个URL后，会自动将scroller-pullUp位置滚动至可视区域。在页面上添加锚点的方法为：&lt;input na...
复制链接

扫一扫

专栏目录