在用 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>

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。