html iframe调用父级方法

六月初六月初 JavaScipt 2018-11-21 11:22:55

ifram的嵌套的使用，难免会遇到对父级页面进行处理，如调用父级页面的方法，刷新父级页面等操作！

原理说明：对父级页面的操作，简单点也就是对父级页面方法的调用，通过调用父级页面的方法实现对父级页面的刷新，数据更新等操作！

具体实现代码如下：

父级HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<iframe src="test.html" width="100%" height="200"></iframe>
		<script type="text/javascript">
			function test(){
				alert("弹出")
			}
		</script>
	</body>
</html>

子页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="" onclick="dianji()" value="点击" />
		<script>
			function dianji(){
				parent.test();
			}
		</script>
	</body>
</html>

注：其实也就是parent调用父级的方法！


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！