子页面获取父页面的参数举例

1.由2.html携带参数跳转到3.html，在3.html中通过iframe加载4.html,同时在4.html中加载5.html

（就相当于2.html是祖父[grandfather] ；3.html是父亲[father]；4.html是儿子[son]；5.html是孙子[grandson])

然后在3.html中获取2.html页面跳转带过来的参数，把这个参数在4.html[son]和5.html[grandson]中获取使用；

2.代码部分

（1）2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#clickme{
				cursor: pointer;
			}
			#clickme:hover{
				color: orange;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div>I'm grandfather</div>
		<div id="clickme">点我进入下一个页面(father)</div>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			//第一个页面传参数，如果是汉字必须编码encodeURIComponent可以进行汉字编码
			//到获取页面，需要decodeURIComponent进行转码，配套使用
			//如果不是汉字（是字母或者数字，可以直接写，不用编码和转码）
			var par=encodeURIComponent('我是第一个页面带来的参数');			
			$("#clickme").on("click",function(){
				location.href='3.html?id='+par
			});
			
		</script>
	</body>
</html>

（2）3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.parent{
				background: border-box;
				color: #fff;
			}
			#iframe3{
				border: 1px solid purple;
			}
			
		</style>
	</head>
	<body>
		<div>I'm father</div>
		<iframe src="4.html" width="400px" height="400px" id="iframe3">
			
		</iframe>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			
		//获取参数封装
		function GetPar(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return decodeURIComponent(r[2]);
			return null;
		}	
		//传入参数名称（为字符串形式）
		//在这里获取，用变量储存，在后续页面才能获得，否则后续子页面无法获取
		var fatherId=GetPar("id");			
		console.log(fatherId)
						
		</script>
	</body>
</html>

（3）4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#iframe4{
				border: 1px solid orange;
			}
		</style>
	</head>
	<body>
		<div>I'm son</div>
		<div id="son"></div>
		<iframe src="5.html" width="" height="" id="iframe4"></iframe>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			//获取页面参数（这里的window.parent后边接的参数必须和父页面的相一致）
			var sonId=window.parent.fatherId;			
			$("#son").html('我获取祖父页面的参数是:sonId= '+sonId)
		</script>
	</body>
</html>

（4）5.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>I'm grandson</div>
		<div id="grandson"></div>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//获取曾祖父页面参数（有两种方法）
			//方法一：grandsonId有两种方法获取，一种是该页面的祖父页面
			//var grandsonId=window.parent.parent.fatherId;
			//方法二：grandsonId有两种方法获取，一种是该页面的父页面
			var grandsonId=window.parent.sonId;
			
			$("#grandson").html('我获取祖父页面的参数是:grandsonId= '+grandsonId)

		</script>
	</body>
</html>

3.运行结果

4.几点说明：

（1）父页面也可拿到子页面的参数；

（2）子页面可拿到父页面的方法，父页面也可拿到子页面的方法；

（3）以上两点请参考：https://blog.csdn.net/hangGe0111/article/details/81504454

子页面获取父页面的参数举例

猜你喜欢