用HTML5的内置对象解析地址栏地址参数

本文介绍了HTML5中window.location对象的使用,包括window.location.href用于获取或重定向URL,window.location.search用于获取问号后的参数,以及window.location.hash用于获取页面锚点。通过实例展示了如何解析和利用这些参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5的内置对象

window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

window.location.href

window.location.href可以获取或者重定url地址,打开浏览器按F12->console,可以直接调试观看,如下:
在这里插入图片描述
我当前的地址是就是https://mp.youkuaiyun.com/mdeditor/83617741

window.location.search

还是一样使用浏览器调试工具,可以直接查看
我们访问地址https://fanyi.baidu.com/?aldtype=16047&key=333#en/zh/hello
在控制台输入window.location.search
在这里插入图片描述
可以看到获取到了地址问号的参数?aldtype=16047&key=333,而且是以&符号作为分隔符。
这样的话,我们可以用js解析这些参数。代码如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取地址栏参数</title>
	<script type="text/javascript">
		function parseUrl(searchURL){
			searchURL = searchURL.substring(1, searchURL.length);
		    var splits = searchURL.split("&");
		    kvs={};//这里kvs=[]也行
		    for (var i = splits.length - 1; i >= 0; i--) {
    			kv=splits[i].split("=");
    			kvs[kv[0]]=kv[1];
    		}
    		return kvs;
		}
		var searchURL = window.location.search;
		var paras=parseUrl(searchURL);
		// 比如我想获取key1,key2,key3的值
		alert("key1:"+paras["key1"]+",key2:"+paras["key2"]+"key3:"+paras["key3"])
	</script>
</head>
<body>
	
</body>
</html>

我保存为D:/code/html/Front-end/test2.html
然后我输入访问地址和对应的参数file:///D:/code/html/Front-end/test2.html?key1=11&key2=33&key3=dsflfsl,结果如下
在这里插入图片描述

window.location.hash

window.location.hash 获取页面锚点或者叫哈希值,也就是地址栏#号后面的部分,如下:
在这里插入图片描述

我的GitHub

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值