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

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

背景介绍

location.search与location.hash是前端开发中常用的两个属性,它们分别用于获取当前url中带的查询参数和锚点参数。这两个属性的使用方式不同,而且在某些情况下会出现一些问题,需要特别注意。

location.search与location.hash的区别

location.search

location.search是获取当前url中的查询参数,格式为?key=value。当出现多个查询参数时,每个参数之间用&符号分隔开来。这个属性返回的值是一个字符串,不包含?符号。举个例子:

当前url:https://www.example.com/search?keyword=apple&category=fruit&page=2
则 location.search 的值为:keywork=apple&category=fruit&page=2

location.hash

location.hash是获取当前url中的锚点参数,格式为#value。锚点参数用于在网页中内部跳转定位,点击链接时可以滚动到相应位置。它不会触发页面刷新。举个例子:

当前url:https://www.example.com/about#contact
则 location.hash 的值为:#contact

使用注意事项

获取查询参数时注意转义问题

当使用location.search获取查询参数时,需要注意参数中可能包含特殊字符(如&、?、=等),这时就需要进行encodeURIComponent编码,否则可能会出现解析错误的问题。比如:

假设跳转到了如下url,其中keyword参数包含了&和=符号:
https://www.example.com/search?keyword=apple&banana=100g=red
则 location.search 的值为:?keyword=apple&banana=100g=red
显然这个值是不正确的,因为&和=符号既用来分隔参数,但也是参数内容中可能出现的字符。
正确的做法是先进行编码,再进行解析:
let params = location.search.substring(1);
let parsedParams = new URLSearchParams(params);
let keyword = decodeURIComponent(parsedParams.get('keyword'));

在锚点参数中使用中文

在锚点参数中使用中文时,需要使用encodeURI进行编码,否则浏览器可能会出现不同的解析结果:

假设跳转到了如下url,其中锚点参数为中文:
https://www.example.com/about#联系我们
则在某些浏览器中,location.hash的值为:#%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC
而在另外一些浏览器中,location.hash的值为:#联系我们
为了解决这个问题,需要在跳转时先进行编码:
let anchor = encodeURI('联系我们');
window.location.href = `https://www.example.com/about#${anchor}`;

示例说明

示例1

假设我们需要在页面中显示当前url中的查询参数,可以使用如下代码:

<ul id="query-params"></ul>

<script>
  let params = location.search.substring(1);
  let parsedParams = new URLSearchParams(params);

  parsedParams.forEach((value, key) => {
    let li = document.createElement('li');
    li.textContent = `${key}: ${value}`;
    document.getElementById('query-params').appendChild(li);
  });
</script>

当跳转到https://www.example.com/search?keyword=apple&category=fruit&page=2时,会在页面中显示如下内容:

- keyword: apple
- category: fruit
- page: 2

示例2

假设我们需要在页面中实现跳转到不同章节的功能,当用户点击“目录”中的某个链接时,页面会自动滚动到相应的章节。可以使用如下代码:

<ul id="toc">
  <li><a href="#chapter1">第一章</a></li>
  <li><a href="#chapter2">第二章</a></li>
  <li><a href="#chapter3">第三章</a></li>
</ul>

<h1 id="chapter1">第一章</h1>
<p>这里是第一章的内容</p>

<h1 id="chapter2">第二章</h1>
<p>这里是第二章的内容</p>

<h1 id="chapter3">第三章</h1>
<p>这里是第三章的内容</p>

<script>
  let toc = document.getElementById('toc');
  toc.addEventListener('click', (e) => {
    e.preventDefault();
    let target = e.target.getAttribute('href');
    let anchor = encodeURI(target.substring(1));
    window.location.href = `https://www.example.com/book${target}`;
    window.location.reload();
    // 在加载完成后进行页面滚动
    window.addEventListener('load', () => {
      window.scrollTo({top: document.querySelector(target).offsetTop, behavior: 'smooth'});
    });
  });
</script>

在用户点击“目录”中的某个链接时,页面会跳转到对应的章节,并自动滚动到该章节的位置。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:小发现之浅谈location.search与location.hash的问题 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js中class的点击事件没有效果的解决方法

    问题描述: 在JavaScript中使用class定义的元素,如果带有点击事件绑定,在点击时有可能不起作用,导致点击事件无法触发。 解决方法: 使用事件代理 事件代理是将处理事件的职责委托给父元素,由父元素处理所有子元素的事件。在这种情况下,即使是通过JavaScript操作添加的元素也能够正确地触发点击事件。 使用addEventListener方法为父元…

    JavaScript 2023年6月10日
    00
  • JavaScript在网页中画圆的函数arc使用方法

    关于”JavaScript在网页中画圆的函数arc使用方法”,以下是详细攻略: 1. arc函数概述 arc()是Canvas API中用于绘制圆弧或圆的方法之一,其基本语法如下: context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 参数含义如下: x:中心点的横坐标。 y:中心点的…

    JavaScript 2023年5月27日
    00
  • JS实现字符串中去除指定子字符串方法分析

    下面是对“JS实现字符串中去除指定子字符串方法”的解析和攻略: 什么是JS实现字符串中去除指定子字符串方法? JS实现字符串去除指定子字符串的方法是指通过JS代码编写,去掉字符串中特定的子字符串的方法。这种方法通常使用常规的JS字符串操作函数(如replace()等)来实现。 JS实现字符串中去除指定子字符串方法的解决方案 常见的JS实现字符串中去除指定子字…

    JavaScript 2023年5月28日
    00
  • Javascript 获取字符串字节数的多种方法

    当需要统计字符串字节数时,Javascript提供了多种方法。以下是其中两种常见方法。 方法一:使用正则表达式 正则表达式可以帮助我们获取字符串中非ASCII字符的数量。假设我们要获取的字符串为”hello,世界”,该字符串长度为11,但其中含有一个ASCII字符和一个非ASCII字符(中文逗号“,”),因此其字节数为13。 下面是使用正则表达式实现获取字节…

    JavaScript 2023年5月19日
    00
  • axios拦截器、ElementUI组件的使用方法

    axios拦截器使用方法 1. 安装Axios Axios是一个基于Promise的HTTP库,可以在浏览器和Node.js中使用。安装Axios,请在命令行输入以下命令: npm install axios 2. 添加拦截器 可以使用Axios的拦截器来在请求或响应被处理前拦截它们。 以下是一个示例,向请求头中添加Authorization: import…

    JavaScript 2023年6月10日
    00
  • jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法

    首先需要说明的是,AjaxPro.Utility.RegisterTypeForAjax辅助方法实际上是AjaxPro框架提供的一种将服务端方法注册到客户端的途径,以便客户端可以直接使用JavaScript调用服务端的方法。而jQuery Ajax也是一种实现客户端与服务端交互的工具。 下面是实现“jQuery Ajax 仿AjaxPro.Utility.R…

    JavaScript 2023年6月11日
    00
  • 用js重建星际争霸

    用JS重建星际争霸需要以下的步骤和技术: 基本准备 首先需要准备的是技术栈: HTML/CSS编写页面样式 Vue.js或React等框架来渲染视图和管理状态 WebGL(或者Three.js等封装库)来绘制3D场景 Node.js和Socket.io来实现多人游戏交互 同时需要准备游戏素材,在设计中包括以下元素: 战争迷雾和地图障碍 单位和建筑模型 动作和…

    JavaScript 2023年5月28日
    00
  • JS锚点的设置与使用方法

    当我们需要在一个较长的网页中跳转到指定页面位置或细节处的时候,往往会使用到JS锚点。JS锚点可以通过设置页面中元素的id属性,实现在页面内跳转到指定元素的效果。下面通过以下几个方面来详细讲解JS锚点的设置与使用方法。 设置JS锚点 1.设置元素的id属性 在HTML中,我们可以通过在指定的元素上设置id属性的值,来为该元素创建一个唯一的标识符。例如: &lt…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部