（1）获取当前标签页地址栏指定参数

最新推荐文章于 2024-05-03 11:47:20 发布

俊小赞

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量276

点赞数 1

分类专栏： # JavaScript Tool Fun 文章标签： javascript es6

本文链接：https://blog.csdn.net/weixin_44808483/article/details/116696888

版权

JavaScript Tool Fun 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、实现代码

html 代码部分：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>获取当前标签页地址栏指定参数</title>
  </head>
  <body></body>
  <script>
  	……
  </script>
</html>

js 代码部分

// 本次测试地址是：http://127.0.0.1:5500/index.html?a=1&b=2

/**
 * 获取当前标签页地址栏指定参数
 * @param {String} paramStr 需要获取的参数名称
 * @return {String / Number} 返回对应的参数值，如没有返回-1
 */
function getURLParameter(paramStr) {
  const paramList = location.search.substring(1).split('&');
  let index = paramList.findIndex(function (item) {
    return item.indexOf(paramStr) != -1;
  });
  return index !== -1 ? paramList[index].substring(paramList[index].indexOf('=') + 1) : -1;
}
console.log(getURLParameter('b'));

二、原理分析

实现原理，通过BOM Loaction对象的内置方法，能够快速回去地址栏的参数部分内容；然后经过数组、字符串方法所提取，详细内容请看代码。

方法描述

loaction.search：「属性」获取浏览器地址栏数据；返回字符串。
String.substring(start,stop)：「方法」提取字符串中介于两个指定下标之间的字符；start 起始下标，必需，stop 结束下标，可选；返回提取后的字符串。
Array.split(separator,howmany)：「方法」用于把一个字符串分割成字符串数组；separator 分隔符，必需， howmany 截取长度，可选；返回新数组。
Array.findIndex(function(currentValue, index, arr), thisValue)：「方法」返回传入一个测试条件（函数）符合条件的数组第一个元素位置；function(currentValue, index, arr) 回调函数，必须，thisValue 可选；返回下标。
Strinig.indexOf(searchvalue,start)：「方法」返回某个指定的字符串值在字符串中首次出现的位置；searchvalue 需要检索的字符串，必需，start 检索起始位置，可选；返回下标。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！

俊小赞

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
（1）获取当前标签页地址栏指定参数

一、实现代码html 代码部分：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>获取当前标签页地址栏指定参数</title> </head> <body></body> <script> …… </script></html&gt
复制链接

扫一扫