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

来源：互联网发布：php guzzle 异步请求编辑：程序博客网时间：2024/05/16 05:21

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>

1 0