如何获取url#号后的参数 (实用、赞）

深藏阁楼爱情的钟 2023-07-13 08:19 50阅读 0赞

原文出处：[https://www.cnblogs.com/haldis/p/4601792.html][https_www.cnblogs.com_haldis_p_4601792.html]

[如何获取url\#号后的参数][https_www.cnblogs.com_haldis_p_4601792.html]

昨天遇到这个问题：在A页面中通过location.href跳转到另一个B页面，此跳转地址是http://www.xyz.com/aa.html#bb.html?param=xxx  现在要怎么在B页面中取到param的值？现在的情况是跳到B页面后地址栏显示的就是http://www.xyz.com/aa.html#bb.html 后面的参数部分没有了，取到的参数值也是空的
    
    搞了好久也没出来，最后问了大牛才发现我的基本功不行啊 理解就出错了，#后的内容都不会传到服务端的，所以到新页面看到的地址栏中就没有#后的参数，经大牛指点，把地址改为：

http://www.xyz.com/aa.html?param=xxx#bb.html  就是先加参数，再加#  因为这个页面是有iframe的，所以其实也是传参数到aa.html的，并不是bb.html

具体细看下下列的各对象说明就明白了

location：子对象  
document.location.hash          // \#号后的部分  
document.location.host          // 域名+端口号  
document.location.hostname      // 域名  
document.location.href          // 完整URL  
document.location.pathname      // 目录部分  
document.location.port          // 端口号  
document.location.protocol      // 网络协议(http:)  
document.location.search        // ?号后的部分

然后到跳转后的页面处理这个地址就可以取到参数值了，方法：

再引用一下http://www.cnblogs.com/kaituorensheng/p/3776527.html内容，说明下\#

# [URL中“\#” “？” &“”号的作用][URL_ _] #

**1. \#**

10年9月，twitter改版。一个显著变化，就是URL加入了"\#!"符号。比如，改版前的用户主页网址为[http://twitter.com/username][http_twitter.com_username]改版后，就变成了[http://twitter.com/\#!/username][http_twitter.com_username 1]  
　　这是主流网站第一次将"\#"大规模用于重要URL中。这表明井号（Hash）的作用正在被重新认识。本文根据HttpWatch的文章，整理与井号有关的所有重要知识点。  
**一、\#的涵义**  
　　\#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html\#print就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。  
　　为网页位置指定标识符，有两个方法。一是使用锚点，比如<a name="print"></a>，二是使用id属性，比如<div id="print">。

**二、HTTP请求不包括\#**  
　　\#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括\#。  
比如，访问下面的网址，[http://www.example.com/index.html\#print][http_www.example.com_index.html_print]，浏览器实际发出的请求是这样的：

GET /index.html HTTP/1.1
    Host: www.example.com

**三、\#后的字符**  
　　在第一个\#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。  
比如，下面URL的原意是指定一个颜色值：[http://www.example.com/?color=\#fff][http_www.example.com_color_fff]，但是，浏览器实际发出的请求是：

GET /?color= HTTP/1.1
    Host: www.example.com

**四、改变\#不触发网页重载**  
　　单单改变\#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。  
比如，从http://www.example.com/index.html\#location1改成http://www.example.com/index.html\#location2，浏览器不会重新向服务器请求index.html。

**五、改变\#会改变浏览器的访问历史**  
　　每一次改变\#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。这对于**ajax**应用程序特别有用，可以用不同的\#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为\#的改变而增加历史记录。

**六、window.location.hash读取\#值**  
　　window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

**七、onhashchange事件**  
　　这是一个HTML 5新增的事件，当\#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。  
　　它的使用方法有三种：

*  window.onhashchange = func;
 *  <body οnhashchange="func();">
 *  window.addEventListener("hashchange"， func, false);

对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

**八、Google抓取\#的机制**  
　　默认情况下，Google的网络蜘蛛**忽视**URL的\#部分。  
　　但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"\#!"，Google会自动将其后面的内容转成查询字符串\_escaped\_fragment\_的值。  
　　比如，Google发现新版twitter的URL：[http://twitter.com/\#!/username][http_twitter.com_username 1]  
　　就会自动抓取另一个URL：[http://twitter.com/?\_escaped\_fragment\_=/username][http_twitter.com_escaped_fragment_username]  
　　通过这种机制，Google就可以索引动态的Ajax内容。

**注**

[AJAX][] = 异步 [JavaScript][]和[XML][]（[标准通用标记语言][Link 1]的子集）。AJAX 是一种用于创建快速动态网页的技术。

**2. ？**

1）连接作用：比如

http://www.xxx.com/Show.asp?id=77&nameid=2905210001&page=1

2）清除缓存：比如

http://www.xxxxx.com/index.html 
    http://www.xxxxx.com/index.html?test123123

两个url打开的页面一样，但是后面这个有问号，说明不调用缓存的内容，而认为是一个新地址，重新读取。

**3. &**

不同参数的间隔符

只有不肯做，没有做不到

[https_www.cnblogs.com_haldis_p_4601792.html]: https://www.cnblogs.com/haldis/p/4601792.html
[URL_ _]: http://www.cnblogs.com/kaituorensheng/p/3776527.html
[http_twitter.com_username]: http://twitter.com/username
[http_twitter.com_username 1]: http://twitter.com/#!/username
[http_www.example.com_index.html_print]: http://www.example.com/index.html#print
[http_www.example.com_color_fff]: http://www.example.com/?color=#fff
[http_twitter.com_escaped_fragment_username]: http://twitter.com/?_escaped_fragment_=/username
[AJAX]: http://baike.baidu.com/subview/1641/5762264.htm?fr=aladdin
[JavaScript]: http://baike.baidu.com/view/16168.htm
[XML]: http://baike.baidu.com/view/63.htm
[Link 1]: http://baike.baidu.com/view/5286041.htm