前言:近期首次完成了一次项目,其中大量用到两个页面之间的传参和获取,在此做一个总结。
零、获取url中的参数函数
只是需要获参函数的朋友这里直接复制就好~
<script>
// 截取字符串后面的参数
function getParameter(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); // 匹配目标参数
if (r != null) {
//清理参数中为null的值
if (unescape(r[2]) == "null") { //在这里做了优化,因为为空时获取的是字符串null
return "";
}
return unescape(r[2]); // unescape()解码,返回参数值
} else {
return "";
}
}
</script>
一、实现效果
二、源码
页面1 (传参):
注意传中文时要用escape编码,否则传递过程中会乱码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS传参</title>
</head>
<body>
<span>用户ID:</span><input type="text" id="uid">
<br>
<span>用户名:</span><input type="text" id="uName" autocomplete="off"> <!-- 这里为了保护隐私取消了自动补全 -->
<br>
<a href="./test2.html" id="transmit" onclick="go()">跳转</a>
<script>
let transmit = document.getElementById("transmit")
function go(){
let uid = document.getElementById("uid").value
let uName = document.getElementById("uName").value
// 改变a的herf指向
transmit.href = "./test2.html?uid=" + uid +
"&uName=" + escape(uName) // 如果传递中文需要先用escape()编码
}
</script>
</body>
</html>
页面2(获参):
1.获参的源码跟网上没有太大差异,因为在使用的过程中发现假如获取参数为null时,该函数会返回字符串“null”,所以做了优化,让其返回""(空值)
2.获参函数的用法是getParameter("对应的参数名"),注意不要漏掉引号
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS获取参数</title>
</head>
<body>
<script>
// 截取字符串后面的参数
function getParameter(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); // 匹配目标参数
if (r != null) {
//清理参数中为null的值
if (unescape(r[2]) == "null") { //在这里做了优化,因为为空时获取的是字符串null
return "";
}
return unescape(r[2]); // unescape()解码,返回参数值
} else {
return "";
}
}
// 获取url中的参数
let uid = getParameter("uid")
let uName = getParameter("uName")
document.write("已获取uid的参数为 " + uid + ",已获取uName的参数为 " + uName)
</script>
</body>
</html>
三、其他运用场景
比较有趣的一个用法是公共页面通过不同的打开方式,会展示不同的内容
实现效果:
源码:
页面1(打开公共页面):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打开页面</title>
</head>
<body>
<a href="./test2.html" id="transmit1" onclick="go1()">跳转1</a>
<a href="./test2.html" id="transmit2" onclick="go2()">跳转2</a>
<script>
function go1(){
let transmit = document.getElementById("transmit1")
let openPage = 1
// 改变a的herf指向
transmit.href = "./publicWeb.html?openPage=" + openPage
}
function go2(){
let transmit = document.getElementById("transmit2")
let openPage = 2
transmit.href = "./publicWeb.html?openPage=" + openPage
}
</script>
</body>
页面2(公共页面):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公共页面</title>
<style>
.hide{
display: none;
}
#green{
color: green;
}
#red{
color: red;
}
#blue{
color: blue;
}
</style>
</head>
<body>
<span id="green">hello!我是小绿</span>
<span id="red">hello!我是小红</span>
<span id="blue">hello!我是小蓝</span>
<script>
// 截取字符串后面的参数
function getParameter(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); // 匹配目标参数
if (r != null) {
//清理参数中为null的值
if (unescape(r[2]) == "null") { //在这里做了优化,因为为空时获取的是字符串null
return "";
}
return unescape(r[2]); // unescape()解码,返回参数值
} else {
return "";
}
}
// 获取url中的openPage
let openPage = getParameter("openPage")
// 做判断,不同方式打开本页面的openPage不同
if (openPage == 1){
document.getElementById("green").classList.add("hide")
}
else if (openPage == 2){
document.getElementById("red").classList.add("hide")
}
</script>
</body>
</html>