小发现之浅谈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日

相关文章

  • 一文详解JavaScript中的replace()函数

    当我们需要对字符串中的某个子串进行替换时,JavaScript中的 replace() 函数是一个非常有用的工具。本文将详细讲解该函数的基本语法、常用选项以及一些实际的应用示例。 基本语法 replace() 函数的基本语法如下: string.replace(regexp|substr, newSubstr|function) 其中,string 是原始字…

    JavaScript 2023年5月28日
    00
  • JavaScript常用语句循环,判断,字符串换数字

    JavaScript是一种非常常用的编程语言,在编写JavaScript代码时,会使用到循环、判断、将字符串转换为数字等常用语句。以下是这些方面的完整攻略: 循环语句 循环语句用于重复执行某些操作,常见的两个循环语句是for循环和while循环。 for循环 for循环用于重复执行某个操作指定次数。 for (var i = 0; i < 10; i+…

    JavaScript 2023年5月28日
    00
  • JavaScript高级程序设计 扩展–关于动态原型

    关于JavaScript高级程序设计中的扩展——动态原型,我来详细解释一下。 动态原型 JavaScript 是一门基于原型继承的语言,原型链决定了对象如何继承属性和方法。原型是 JavaScript 对象中一个非常重要的概念,用于实现对象的继承,从而节省大量的代码。 动态原型模式是一种在同时使用构造函数和原型的情况下,可以向原型中添加方法的方法。如下所示:…

    JavaScript 2023年5月27日
    00
  • JavaScript版代码高亮

    JavaScript版代码高亮是一种常见的在网页中实现代码着色效果的方式。以下是该技术的完整攻略。 什么是JavaScript版代码高亮 JavaScript版代码高亮是一种传统的在前端网页中实现代码着色的方式。它基于JavaScript语言,通过识别代码标签,并在标签内的文本中应用CSS样式,从而实现代码高亮的效果。由于其简单易用,不需要使用额外的插件或库…

    JavaScript 2023年6月10日
    00
  • javascript 玩转Date对象(实例讲解)

    Javascript 玩转 Date 对象(实例讲解) 日期和时间在 Javascript 中有着非常重要的地位,而 Date 对象则是用于处理日期和时间的核心对象。在本攻略中,我们将介绍 Date 对象的常用的方法和属性,并提供一些在实际项目中可能会用到的示例供参考。 初始化 Date 对象 在创建 Date 对象时,可以使用以下语句: var date …

    JavaScript 2023年6月10日
    00
  • JS实现“隐藏与显示”功能(多种方法)

    JS实现“隐藏与显示”功能是Web开发中常用的交互效果。下面我将为大家介绍几种实现方法,并演示两个简单的示例。 方法一:使用jQuery实现“隐藏与显示”功能 在使用jQuery实现“隐藏与显示”功能时,可以调用jQuery的方法实现DOM元素的隐藏和显示。以下是实现代码: // 隐藏元素 $("#element").hide(); //…

    JavaScript 2023年5月19日
    00
  • javascript生成img标签的3种实现方法(对象、方法、html)

    以下是详细讲解“javascript生成img标签的3种实现方法(对象、方法、html)”的完整攻略。 方法一:使用JavaScript对象 var img = new Image(); img.src = ‘http://example.com/example.jpg’; document.body.appendChild(img); 上面代码首先创建一个…

    JavaScript 2023年6月10日
    00
  • JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解

    JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解 概述 Zip.js 是一个基于 JavaScript 的 zip 压缩和解压缩工具包。它可以在 Web 浏览器中直接使用,也可以使用 Node.js 运行。Zip.js 支持多种常见的文件格式,包括 ZIP、GZIP 等。 安装 Zip.js 可以直接在页面中引用,也可以通过 np…

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