在用 iframe的时候，不得不对子页面或父页面进行操作，或者传递参数，这时就需要用独特的方法实现了，实现办法也简单：

案例中，父级页面通过 iframe获取子页面的参数，并通过子页面调用父页面的方法，将弹框关闭，实现父子页面方法和参数共享。
注意点： 1.父页面写好：子页面调用父页面的方法
              2.子页面通过 parent方法获取调用父级的方法，也可以传参！
另外，如果有多个父页面，就一个子页面，针对不同父页面返回不一样的参数，子页面怎么办？千万不要复制多个子页面，去一一对应，通过：parent.location.pathname 可以获取当前父页面的网址地址，然后去匹配父页面的文件名就行了，匹配的话，可以用正则、indexOf()都可以，用自己擅长的。

父页面代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../css/qux/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.page{width: 500px;height: 500px;margin-top: 20px;}
	</style>
	<style type="text/css"> 
	</style>
	<body>
		<h3>我是父页面</h3>
		<p class="getVal"></p>
		<button class="btn">打开子页面</button>
		<div class="page" style="display: none;">
			<iframe src="" width="100%" height="100%"></iframe>
		</div> 
		<script type="text/javascript">
			//点击事件
			$(".btn").click(function(){
				$(".page iframe").attr("src","aa.html"); //修改iframe并显示
				$(".page").show();
			})
			//父页面写好：子页面调用父页面的方法
			function closeChild(value){ 
				$(".page iframe").attr("src",""); 
				$(".page").hide();
				$(".getVal").text("父页面获取到了子页面传递的参数：'"+value+"'");
			} 
		</script>
	</body>
</html>

 
子页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../css/qux/jquery-1.8.3.min.js" type="text/javascript" chars.cliet="utf-8"></script> 
	</head>
	<body> 
		<h3>我是子页面</h3>
		<p>子页面的值为：<span class="val">2020-12-22 这是我的秘密！</span></p>
		<button class="btns">返回父页面，并关闭iframe</button> 
		<script type="text/javascript">
			$(".btns").click(function(){
				//子页面通过parent获取调用父级的方法，也可以传参！
				parent.closeChild($(".val").text());
			})
		</script>
	</body>
</html>
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。