html局部页面刷新和跳转传参_html.actionlink动态传参-CSDN博客

本文链接：https://blog.csdn.net/jnx1142410525/article/details/63253928

index.html为父页面，A.html和B.html为局部刷新的子页面。

页面跳转：

如index.html所示，用<iframe>标签实现页面的嵌套。

参数传递：

当需要传递参数时，可使用js实现为跳转页面的同时传参，获取的参数需要解码。

1.index.html

<!DOCTYPE html>
<html style="height: 100%;overflow: hidden;">
<head>
	<title>页面跳转</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="height: 100%;overflow: hidden;">
	<li><a href="A.html" target="con">跳转A</a></li>
	<br/>
	<li><a href="B.html" target="con">跳转B</a></li>
	<br/>
	<iframe name="con" src="A.html"></iframe>
</body>
</html>

2.A.html

<!DOCTYPE html>
<html style="height: 100%;overflow: hidden;">
<head>
	<title>A页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="height: 100%;overflow: hidden;">
	<h4>A页面</h4>
	<button id="bt" οnclick="jump()">传参</button>
	<script type="text/javascript">
		function jump(){
			var name="跳转成功";
			location.href="B.html?name="+name;
		}
	</script>
</body>
</html>

3.B.html

<!DOCTYPE html>
<html style="height: 100%;overflow: hidden;">
<head>
	<title>B页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="height: 100%;overflow: hidden;">
	<h4>B页面</h4>
	<button id="bt" οnclick="show()">获取参数</button>
	<script type="text/javascript">
		var str=this.location.search;
		var val1=str.split("name=");
		var val2=val1[1];
		//url解码
		val2=decodeURI(val2);
		function show(){
			alert(val2);
		}		
	</script>
</body>
</html>