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

最新推荐文章于 2021-06-25 22:18:30 发布

原创最新推荐文章于 2021-06-25 22:18:30 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

网站开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了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>