iframe父子页面通信各种操作

最新推荐文章于 2024-06-05 17:06:33 发布

dongsdh

最新推荐文章于 2024-06-05 17:06:33 发布

阅读量284

点赞数

分类专栏： iframe

本文链接：https://blog.csdn.net/dongsdh/article/details/103501034

版权

iframe 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

父页面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>父页面</title>
	<style>
		body{
			border: 4px solid red;
			box-sizing: border-box;
		}
		.box{
			display: inline-block;
			width: 300px;
			vertical-align: top;
		}
		iframe{
			border: 4px solid green;
			box-sizing: border-box;
			display: inline-block;
		}
	</style>
	<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
	<div class="box">
		父页面
		<p class="p1"></p>
		<button id="btn1">获取子页面的变量</button><span id="f1"></span><br />
		<button id="btn2">执行子页面的方法</button>
	</div>
	<iframe id="iframe1" src="iframechild.html" width="" height=""></iframe>
	<script>
		var babamoney=500;
		function babafun1(){
			$('.p1').html('爸爸当前金额为'+babamoney+'元')
		}
		$("#btn1").click(function(){
			let num=$('#iframe1')[0].contentWindow.qian
			$('#f1').text(num)
		})
		$("#btn2").click(function(){
			$('#iframe1')[0].contentWindow.shownum()
		})
	</script>
</body>
</html>

子页面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>子页面</title>
	<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
	子页面<br />
	<p class="childp"></p>
	<button id="btn1">获取父页面的变量</button><span id="s1"></span><br />
	<button id="btn2">执行父页面的方法</button><br />
	<button id="btn3">刷新父页面（子页面重新被引用会跟着刷新）</button><br />
	<button id="btn3_1">刷新子页面</button><br />
	<button id="btn4">关闭当前iframe</button><br />
	<button id="btn5">关闭浏览器窗口</button><br />
	<button id="btn6">刷新最顶端对象（子页面重新被引用会跟着刷新）</button><br />
	<script>
		var qian=20
		function shownum(){
			$('.childp').text('儿子的当前金额为'+qian);
		}
		$('#btn1').click(function(){
			$('#s1').text(parent.babamoney)
		})
		$('#btn2').click(function(){
			window.parent.babafun1();
		})
		$('#btn3').click(function(){
			parent.location.reload();
		})
		$('#btn3_1').click(function(){
			window.location.reload(); 
		})
		$('#btn4').click(function(){
			window.parent.document.getElementById("iframe1").style.display="none";
		})
		$('#btn5').click(function(){
			window.parent.close()
		})
		$('#btn6').click(function(){
			top.location.reload();
		})
	</script>
</body>
</html>

var dom = window.parent.document.getElementById("menus");
	   			$(dom).find('.nav-notice').hide();

dongsdh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录