`

window.location.hash解析

阅读更多
location对象:设置或获取当前URL的信息

使用location对象可以设置或返回URL中的一些信息,一个完整的URL地址的格式为:

协议://主机:端口/路径名称#hash标识?搜索条件

其中,协议是URL的起始部分,用于指定该URL地 址所采用的通信协议,比如http、ftp等;主机是指该URL所对应的服务器的名称;端口用于指定服务器用于通信的端口号,与主机名之间使用冒号隔开; 路径名称是指该URL所对应的网页文件在服务器上的虚拟路径;如果页面中含有锚点连接,可以使用hash标志指定页面中的锚点标志,该标志以“#”开头; 搜索条件是指URL中所含有的查询条件,该查询条件以“?”开头,以“变量名称=值”的形式出现,多个查询条件之间使用连接符“&”连接。比 如:http://upc.edu.cn:8080/wwwroot/ index.html#topicID?id=3876。

利用location对象可以方便地设置或获取URL中的各种信息,本节将详细介绍location对象的一些常用属性和方法。
1.hash属性

【功能说明】设置或获取URL中的锚点名称,如果Web页面中使用的锚点连接,通过设置location对象的hash属性可以方便的跳转到页面中的不同部分。

【基本语法】location.hash

下面的代码演示了如何在网页中使用location对象的hash标志快速定位页面中的 内容。

【实例演示】

<script>

    function getAnchor(str)

    {

      window.location.hash=str;

    }

</script>

<body>

  //创建锚点链接,快速定位网页内容

  <a href="javascript:getAnchor('jueju');">杜甫 绝句</a>

  <a href="javascript:getAnchor('yijianmei');">李清照 一剪梅</a>

  <a href="javascript:getAnchor('hanghelou');">崔颢 黄鹤楼</a>

  //下面定义了3个锚点

  <a name="jueju"><center>绝句</center>

  <!--古诗内容省略,见源代码-->

  </a><br><br><br><br><br>

  <a name="yijianmei"><center>一剪梅</center>

  <!--古诗内容省略,见源代码-->

  </a><br><br><br><br><br>

  <a name="hanghelou"><center>黄鹤楼</center>

  <!--古诗内容省略,见源代码-->

  </a>

</body>

这段代码在一个网页文件中创建了3个锚点链接, 单击其中任一个链接,程序就会调用getAnchor函数来设置location对象的hash属性为相应的值,以使页面滚动到指定的内容上。运行这段代 码,将窗口缩小并单击链接“崔颢 黄鹤楼”则可以看到图16.18所示的效果。
分享到:
评论

相关推荐

    javascrip获取url方式

    例如,通过`window.location.search`,我们可以解析出查询字符串中的参数,从而在页面加载时自动执行某些功能,或者根据参数的值动态修改页面内容。同样,`window.location.hash`常用于单页应用中实现平滑滚动至页面...

    JS 获取当前页面的URL

    8. `window.location.hash`:返回URL的哈希值,即`#`后面的部分,如`#hash`。 此外,`window.location`对象还提供了`assign()`、`reload()`和`replace()`等方法,用于导航到新的URL、刷新当前页面或替换历史记录中...

    小发现之浅谈location.search与location.hash的问题

    var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } // 调用方法 alert(GetQueryString("参数名1")); ``` 2. 字符串方式: ```javascript ...

    AS语言获取url参数的说明

    var hash:String = ExternalInterface.call("eval", "window.location.hash"); ``` 这段代码将返回片段标识符部分,例如`#love`。 #### 获取URL参数的实例 为了更好地理解如何处理查询字符串中的参数,下面提供了...

    js获取URL的信息

    var hash = window.location.hash; // 例如:#imhere // 注意,这里包括 # 号 ``` #### 四、解析 Query(查询参数) 除了以上提到的基本方法外,很多时候还需要进一步解析查询参数。这可以通过对 `search` ...

    (JS获取地址栏url所有信息的方法

    - `window.location.hash`:返回URL中的片段标识符。 - 示例:`#a1` #### 其他获取URL地址的方法 除了上述方法外,还可以通过以下方式获取当前页面的URL: - `document.URL`:返回当前文档的URL,与`window....

    [removed]和[removed]的区别分析

    8. **`window.location.hash`**:返回URL的片段标识符,即井号 "#" 后面的部分,通常用于页面内的锚点定位。 在实际应用中,`window.location` 的这些属性可以用于解析、修改和重定向URL。例如,如果你想在用户点击...

    js获取location.href的参数实例代码

    总的来说,JavaScript中的`location.href` 和 `window.location.search` 属性提供了方便的方式来访问和解析URL参数。理解这些概念以及如何使用它们,对于开发Web应用时处理URL数据至关重要。通过上面的实例代码,你...

    location.href用法总结(最主要的)

    `location.href`还可以与URL的其他部分结合使用,如`location.pathname`获取路径名,`location.search`获取查询字符串,`location.hash`获取URL的哈希部分,这些可以用于构建和解析URL,实现更复杂的页面操作。...

    [removed] 对象所包含的属性

    `window.location.hash`是URL的锚点部分,从井号 (`#`) 开始,常用于页面内部定位。例如`#anchor`。通过设置`hash`,可以实现页面内部的跳转,而无需重新加载整个页面。 在实际工作中,这些属性常常被用来处理页面...

    JavaScript获取URL汇总

    - 使用window.location.hash可以获取URL的片段标识符。例如:`var test = window.location.hash; alert(test);` 在获取URL组成部分时需要注意的是,如果URL没有明确指定某个部分,如端口或查询字符串,使用相应属性...

    网络游戏-使用JavaScript对在网络浏览器中的分层URI解除引用的机制.zip

    若想更改页面URL而不实际导航,可以设置`window.location.hash`来更新页面的片段标识符,这样可以实现锚点跳转。对于查询字符串的处理,JavaScript还提供了`URLSearchParams`接口,它允许我们方便地添加、删除和修改...

    js获取当前页的URL与[removed].href简单方法

    如果你想要获取URL的特定部分,如路径、查询参数或片段标识符,可以使用不同的属性,如`window.location.pathname`、`window.location.search`和`window.location.hash`。 然而,如果需要手动解析URL的不同部分,...

    微信小程序开发附源码:详解Vue开发微信H5微信分享签名失败问题解决方案.doc

    一种简单且实用的解决方案是在需要分享的页面中,放弃使用Vue的`router.push`进行跳转,而是改用`window.location.href`进行页面跳转。这种方法可以强制浏览器刷新URL,从而解决签名失败的问题。 在代码实现上,...

    js 实现iframe 之间传值

    总结,JavaScript提供了多种在`iframe`之间传递值的方法,包括`postMessage()`、`window.name`、`location.hash`、Web存储API以及`window.parent`和`window.frames`。选择哪种方法取决于具体的需求,如是否跨域、...

    一个非常全面的javascript URL解析函数和分段URL解析方法

    8. window.location.hash - 返回URL中的锚点部分,以井号(#)开头。 这些属性和方法可以在大多数现代浏览器中使用,从而获取或解析当前页面的URL。 总结而言,本文所提到的自定义JavaScript URL解析函数和...

    BOM知识点汇总

    - **URL操作**:`location.href`获取或设置整个URL,`location.pathname`获取路径名,`location.search`获取查询字符串,`location.hash`获取URL的锚点部分。 - **导航**:`location.reload()`刷新页面,`location...

    Javascript解析URL方法详解

    window.location.host返回主机部分,window.location.port返回端口号,window.location.pathname返回路径部分,window.location.search返回查询部分,而window.location.hash返回fragment部分。 接下来,我们介绍两...

Global site tag (gtag.js) - Google Analytics