iframe父页面调用子页面方法和iframe子页面调用父页面方法

作者：microsoftvs 更新时间：2019/11/1 17:59:09 点击数：6653

iframe父页面调用子页面方法和iframe子页面调用父页面方法实例，代码简单一看就懂。

iframe父级页面与子级页面互相调用js的方法

iframe父页面调用子页面方法，iframe子页面调用父页面方法

iframe父级页面调用子级页面：
请注意在使用chorme测试时，一定要在服务端下测试，否则会报跨页传值错误
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

document.getElementById("iframeID").contentWindow.子级页面方法();

实例

父页面代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iframe父级页面与子级页面互相调用js的方法</title>
</head>

<body>
	
	<h3>父页面</h3>
	<iframe id="iframebb" src="b.html" ></iframe>
	<br>
	
	<script>
		function ff(){
			alert("这里是父页面ff的方法");
		}
		
		function tt(){
			document.getElementById("iframebb").contentWindow.bb();
		} 
	</script>
	<input type="button" value="调用子页面方法" onclick="tt()" />
</body>
</html>


子页面b.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子页面</title>
</head>

<body>
	<h3>子页面</h3>
	<input type="button" value="调用父页面方法" onclick="gg()" />
	<script>
		function bb(){
			alert("这里是子页面bb的方法");
		}
		
		function gg(){
			//父级页面方法
			window.parent.ff();
		}
		
	</script>
</body>
</html>