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>