iframe内嵌页面父子页面互调的实践

最新推荐文章于 2023-07-28 17:00:03 发布

saowen163

最新推荐文章于 2023-07-28 17:00:03 发布

阅读量207

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/saowen163/article/details/106925944

版权

话不多少，直接上代码
父页面parent.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div >
			<input type="button" value="父页面调子页面方法" onclick="parentFun()" />
			<div class="iframe-page">
				<iframe src="child.html" id="iframe1" width="100%" height="100%"></iframe>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function parentFun(){
			document.getElementById('iframe1').contentWindow.childFunc('这是来自父页面的信息')
		}
		var fatherFunc = function(){
			alert('子页面调父页面方法')
		}
	</script>
	<style type="text/css">
		html,body {
			width: 100%;
			height: 100%;
		}
		.iframe-page {
			margin-top:10px;
			/* border: 1px solid red; */
			width: 200px;
			height: 200px;
		}
	</style>
</html>

子页面 child.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div class="">
		<input type="button" onclick="parentFunc()" value="子页面调父页面方法" />
	</div>
	</body>
	<script type="text/javascript">
		var childFunc = function(value){
			alert(value)
		}
		function parentFunc(){
			window.parent.fatherFunc()
		}
	</script>
</html>

父页面调子页面方法通过document.getElementById(‘iframe’).contentWindow.childFunc()
子页面调父页面方法：window.parent.fatherFunc()

saowen163

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
iframe内嵌页面父子页面互调的实践

话不多少，直接上代码父页面parent.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div > <input type="button" value="父页面调子页面方法" onclick="parentFun()" />
复制链接

扫一扫