URL 地址栏锚点 window location hash 使用方法

2024-02-15 02:48
文章标签 使用 方法 window url hash 锚点 location 地址栏

本文主要是介绍URL 地址栏锚点 window location hash 使用方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

location是javascript里边管理地址栏的内置对象，

比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。

本文转自米扑博客：URL 地址栏锚点 window.location.hash 使用方法

js 重定向网址的两种方法：

window.location.href = "https://proxy.mimvp.com";   // 本窗口跳转到米扑代理

window.open("https://proxy.mimvp.com");                // 新窗口打开跳转到米扑代理

 

location.hash 则可以用来获取或设置页面的标签值。

格式：http://domain/#admin 的 location.hash="#admin"

示例：https://proxy.mimvp.com/question.php#faq_welcome

利用这个属性值可以做一个非常有意义的事情。

 

一、window.location.hash 的 # 涵义

#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，

https://proxy.mimvp.com/question.php#faq_welcome

就代表网页 question.php 的 faq_welcome 位置，浏览器读取这个URL后，会自动将  faq_welcome 位置滚动至可视区域。

若顶部导航菜单栏固定，则需要通过js来精确控制滚动位置

为网页位置指定标识符，有两个方法：

1）使用锚点，比如<a name="faq_welcome"></a>

2）使用id属性，比如<div id="faq_welcome" >

上面的米扑代理，使用的第二种方法。

mash 是可以赋值的，格式：

var cat_item_a_href = $(this).attr("href");

window.location.hash = cat_item_a_href;

例如：点击 <a> 获取 href 并赋值给 hash 则自动更新后面的内容  #faq_welcome —> #faq_buy_invoice

https://proxy.mimvp.com/question.php#faq_buy_invoice

 

二、HTTP请求不包括 #

# 只是用来指导客户端浏览器的本地行为，对服务器端完全不起作用的。

所以， HTTP请求中不包括#，一般是服务器端使用 # 方便客户通过浏览器准确、快速浏览

例如：米扑代理的常见问题文档 https://proxy.mimvp.com/question.php#faq_welcome

示例：

比如，访问下面的网址 https://proxy.mimvp.com/question.php#faq_welcome

浏览器实际发出的请求是这样的：

GET /index.html HTTP/1.1

Scheme：https

Host：proxy.mimvp.com

Port：443（https默认服务器端口隐藏了）

uri：question.php

可以看到，只是请求question.php，根本没有"#faq_welcome"的部分。

 

三、#后的字符

在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。

这意味着，这些字符都不会被发送到服务器端。

比如，下面URL的原意是指定一个颜色值：

http://www.example.com/?color=#fff

但是，浏览器实际发出的请求是：

GET /?color= HTTP/1.1

Host: www.example.com

可以看到，"#fff"被省略了。只有将#转码为%23，浏览器才会将其作为实义字符处理。

也就是说，上面的网址应该被写成：http://example.com/?color=%23fff

 

四、改变#不触发网页重载

单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，#后的锚点都是在客户端浏览器上运行的

比如，从 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

就会自动抓取另一个URL：

http://twitter.com/?_escaped_fragment_=/username

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

我们再来看有网友遇到这样一个问题，如以下代码所示，每次点击页面上的按钮都将改变浏览器地址栏中的值，这样的话就可以欺骗到浏览器(并没有向服务器发送新的请求)，使得它的“后退”和“前进”按钮可以用。 

现在的问题是，在ie6+和ff3下浏览器的值都改变了，但是只有在ff3下“前进”和“后退”可以用，在ie下这两个都是灰色不可用的，请问为什么呢？ 

代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

    <head>

        <script type="text/javascript">

            // 每次点击都会调用test()，它会改变url的值

            var i = 0;

            function test(){  

                window.location.hash = i;

                i++;  

            }

        </script>

    </head>

    <body>

        <input type="submit" value="i love proxy.mimvp.com" onclick="test()"/>

    </body>

</html>

下面就讲述一下hash结合ajax的使用，ajax每次取数据时页面更新后浏览器并不产生历史记录，也就是说后退和前进按钮失去应用的效用，这时可以结合hash和window.onhashchange来使用，注意ie6、7均不支持onhashchange，但可以用setInterval定期检查hash的改变，或者onload中检查的方法。

具体实现：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<html>

<head>

<title>i love proxy.mimvp.com</title>

</head>

<body>

  <div id="div1"></div>

  <input type="button" value="click" onclick="GetT()" />

</body>

</html>

 

<script type="text/javascript" src="js/AjaxHasPool.js">

</script>

 

<script type="text/javascript">

    var ajax = new AjaxHasPool();

    var method="get";

    var url ="Handler.ashx";

    var i = 1;

    var obj = new Object();

    function GetT()

    {

        document.getElementById("div1").innerHTML=i;

        ajax.Startup(null,url,method,ep);

    }

    function ep(xmlobj){

        eval("obj['"+i+"']="+i+";");

        location.hash = "#"+i;              // 赋值 window.location.hash

        ++i;

    }

    window.onhashchange = function(){

        var hashStr = location.hash.replace("#","");       

        if(typeof(eval("obj['"+hashStr+"']"))!="undefined") {

            document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']");

        }

    }

</script>

说明：

1. AjaxHasPool是自己封装的ajax类，其中的ajax.Startup()就是发送ajax请求；

2. Object对象保存历史记录，如果对象属性为数字的话，要用obj["1"]的方式来实例化，否者会违反命名规范。

3. 在使用window.onhashchange检测hash值获取历史数据。

 

这篇关于URL 地址栏锚点 window location hash 使用方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/710257。

相关文章

C语言中联合体union的使用

C语言中联合体union的使用

本文编辑整理自： http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union）与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量
阅读更多...
问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示
阅读更多...
[word] word设置上标快捷键 #学习方法#其他#媒体

[word] word设置上标快捷键 #学习方法#其他#媒体

word设置上标快捷键 办公中，少不了使用word，这个是大家必备的软件，今天给大家分享word设置上标快捷键，希望在办公中能帮到您！ 1、添加上标 在录入一些公式，或者是化学产品时，需要添加上标内容，按下快捷键Ctrl+shift++就能将需要的内容设置为上标符号。 word设置上标快捷键的方法就是以上内容了，需要的小伙伴都可以试一试呢！
阅读更多...
Tolua使用笔记（上）

Tolua使用笔记（上）

目录   1.准备工作 2.运行例子 01.HelloWorld：在C#中，创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile：在C#中，对一个lua文件的执行调用 03.CallLuaFunction：在C#中，对lua函数的操作 04.AccessingLuaVariables：在C#中，对lua变量的操作 05.LuaCoroutine：在Lua中，
阅读更多...
大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式，可以快速查找问题解析，加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语音听题、本地搜题、顺序阅读、模拟考试、组卷考试、赶快下载吧! 2.彩虹搜题 这是个老公众号了 支持手写输入，截图搜题，详细步骤，解题必备
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...
电脑不小心删除的文件怎么恢复？4个必备恢复方法！

电脑不小心删除的文件怎么恢复？4个必备恢复方法！

“刚刚在对电脑里的某些垃圾文件进行清理时，我一不小心误删了比较重要的数据。这些误删的数据还有机会恢复吗？希望大家帮帮我，非常感谢！” 在这个数字化飞速发展的时代，电脑早已成为我们日常生活和工作中不可或缺的一部分。然而，就像生活中的小插曲一样，有时我们可能会在不经意间犯下一些小错误，比如不小心删除了重要的文件。 当那份文件消失在眼前，仿佛被时间吞噬，我们不禁会心生焦虑。但别担心，就像每个问题
阅读更多...
Lipowerline5.0 雷达电力应用软件下载使用

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据，优化了分类算法，支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类；一键生成危险点报告和交跨报告；还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com，资源源于网络，本介绍用于学习使用，如有侵权请您联系删除！ 2.新增快速版，简洁易上手 支持快速版和专业版切换使用，快速版界面简洁，保留主
阅读更多...
如何免费的去使用connectedpapers？

如何免费的去使用connectedpapers？

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录（也就是访客模式）4. 两次用完，关闭无痕模式（继续重复步骤 2 - 4） 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址：https://www.connectedpapers.com/ 3. 不需要登录（也就是
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2