iframe调用父页面js方法

六月初六月初 JavaScipt 2018-12-19 13:56:38

网站开发中遇到iframe嵌套的使用，通常也可能需要对iframe嵌套页面父级页面进行操作，那么我们如何对其进行操作呢？

其实，对父页面的操作==通过JS中partent对父级页面js操作的过程。

换一种方法来说，无论你是对父级页面样式亦或是方法的调用，都可以通过使用js中的partent的对象进行处理！

如：我们需要在嵌套的iframe页面中对父级页面的某个div进行展示！（首先在父级页面写一个显示的方法，其次在子页面中点击对父级页面定义显示方法的调用！）

完整代码：（父级页面）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" style="display: none;">
			<h1>六月初博客站</h1>
		</div>
		<iframe src="1.html" width="200" height="200"></iframe>
		<script>
			function test(){
				document.getElementById("test").style.display="block"
			}
		</script>
	</body>
</html>

子页面代码：

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

运行后，通过点击子页面的按钮，可以看到父级页面的方法被正常调用！

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