您的位置：首页 > Web前端 > HTML

html局部页面刷新和跳转传参

2017-03-18 14:31 302 查看

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" onclick="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" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航