本文作者:心月

js操作iframe:父页面-子页面之间相互操作

心月IT博客 2019-12-04
js操作iframe:父页面-子页面之间相互操作摘要:虽然通过 iframe 嵌套页面后,从浏览效果上看都是在同一个页面,但实际上 iframe 和父页面是相对独立了,iframe 内的页面和父页面之间并不能直接通过 js 操作对方。

虽然通过 iframe 嵌套页面后,从浏览效果上看都是在同一个页面,但实际上 iframe 和父页面是相对独立了,iframe 内的页面和父页面之间并不能直接通过 js 操作对方。下面心月博主就通过小实例来演示,如何通过JavaScript 来实现  iframe 和父页面之间的相互操作。

1、子页面操作父页面

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="child">操作父级元素</div>
	<script type="text/javascript">
		var childVar = "我是子页面变量";
		$('#child').click(function(){

			// 获取父页面的变量
			alert(window.parent.window.parent.parentVar);
                        
                        //操作页面父元素
			// jQuery 操作
			$("#parentID",parent.document).after("<div style='height:100px;width:100px;background:#eee;float:left;'>jQuery操作:我来自iframe页面</div>")

			// 原生 JavaScript 操作
			var div = document.createElement('div');
			div.setAttribute("class","from-iframe");
			div.innerHTML = "原生JavaScript操作:我来自iframe页面";
			div.style.height = "100px";
			div.style.width = "100px";
			div.style.background = "#92e439";
			div.style.float = "left";
			window.parent.document.getElementsByClassName("container")[0].appendChild(div) 
		})
	</script>
</body>
</html>


2、父页面操作子页面

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		iframe{clear: both;display: block;margin: 20px auto;width: 680px;height: auto;/*float: left;margin-left: 300px;*/}
		.container { display: block;min-width: 320px;max-width: 640px;font-size: 15.5px;font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;            color: #000;margin: 20px auto;}
	</style>
</head>
<body>
	<div class="container">
		<div id="parentID">操作iframe</div>
	</div>
	<iframe src="child.html" id="iframeID" name="child-iframe"></iframe>
	<script type="text/javascript">
		var parentVar = "我是父页面变量";
		$('#parentID').click(function(){

			// 获取子页面变量 
			alert(document.getElementById("iframeID").contentWindow.childVar);

			// 操作 iframe子页面
			// jQuery 操作
			 $("#iframeID").contents().find('#child').after("<div style='height:100px;width:100px;background:#ffce44;float:left;'>jQuery操作:我来自父级页面</div>")

			// 原生 JavaScript 操作
			document.getElementById("iframeID").contentDocument.getElementsByTagName('body')[0];
			var div = document.createElement('div');
			div.setAttribute("class","from-parent");
			div.innerHTML = "原生JavaScript操作:我来自父级页面";
			div.style.height = "100px";
			div.style.width = "100px";
			div.style.background = "#19a15f";
			div.style.float = "left";
			document.getElementById("iframeID").contentDocument.getElementsByTagName('body')[0].appendChild(div) 

		})
	</script>
</body>
</html>


实际效果:

js操作iframe:父页面-子页面之间相互操作

【注意】

1、注意跨域问题,上面演示的小实例是在不跨域的前提下完成的,如果跨域的话会稍微复杂些。

2、实例中虽然只演示了变量获取和元素操作,还有函数调用没演示,不过函数可以看成是另类的变量,因此函数的调用可以参照变量的相互操作来实现。

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-12-04
若转载请注明原文及出处:https://www.xinyueseo.com/biaoqian/547.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论