利用iframe进行父页面和子页面的通信

蔚落 2022-06-10 10:38 224阅读 0赞

父页面parent.html:

<span id='parentSpan'>父页面元素</span>
    	<iframe src="child1.html" id='frame1'></iframe><br/>
    	<iframe src="child2.html" id='frame2'></iframe><br/>
    	<button οnclick="getChildItem()">调用子页面方法</button>
    	<button οnclick="getChildItem()">获取子页面元素</button>

调用子页面child1.html的方法，并获取其元素

function parentSay(){
    		alert('say parent')
    	}
    
    	function getChildItem(){
    		var child=document.getElementById('frame1').contentWindow;//第一种方法获取子页面
    		//调用子页面的方法
    		child.childSay();
    	}
    
    	function getChildItem(){
    		var child=window.frames[0];//第二种方法获取子页面
    		var childSpan=child.document.getElementById('childSpan');//获取子页面的元素
    		alert(childSpan.innerHTML)
    	}

子页面1, child1.html:

<span id='childSpan'>子页面1的元素</span><br/>
    	<button οnclick="getParentFunction()">调用父页面方法</button>
    	<button οnclick="getParentItem()">获取父页面元素</button>

子页面的方法：

function childSay(){
    		alert('page1 function')
    	}
    	
    	function getParentFunction(){
    		var parent=window.parent;//获取父页面
    		parent.parentSay();//调用父页面的方法
    	}
    	function getParentItem(){
    		var parent=window.parent;
    		var parentSpan=parent.document.getElementById('parentSpan');//获取父页面的元素
    		alert(parentSpan.innerHTML)
    	}

子页面1也可以与子页面2进行通信

child1中添加

function getPage3(){
    		var parent=window.parent;//这里可以用parent.window获取父页面，在chrome测试过
    		var page3=parent.document.getElementById('frame2').contentWindow;//通过父页面获取到父页面中的另一个子页面
    		page3.childSay();//调用另一个子页面的方法
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 postMessage实现iframe和父页面之间的通信

[postMessage的使用][postMessage] 一、简介 1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文

迷南。/ 2022年12月30日 15:56/ 0 赞/ 306 阅读

相关用iframe 进行局部刷新--(子页面,父页面变量和函数互相调用)

（1）主页面（包含iframe）的初始化 <iframe id="myFrameId"></iframe> $("\myFram

缺乏、安全感/ 2022年06月17日 13:28/ 0 赞/ 259 阅读

相关利用iframe进行父页面和子页面的通信

父页面parent.html: <span id='parentSpan'>父页面元素</span> <iframe src="child1.html" i

蔚落/ 2022年06月10日 10:38/ 0 赞/ 225 阅读

相关 iframe——html子页面调用父页面的方法

$( function () \{ //在iframe子页面中查找父页面元素 alert($( '\default' , window.parent.document

心已赠人/ 2022年05月25日 00:36/ 0 赞/ 415 阅读

相关 iframe父页面自适应子页面的高度

我们一般情况下是在子页面获取高度传递给父页面，但是由于存在跨域问题，解决起来不是很方便而 [html5 postMessage解决跨域、跨窗口消息传递][html5 pos

系统管理员/ 2022年04月11日 12:22/ 0 赞/ 425 阅读

相关 iframe子页面获取父页面的文本值

iframe子页面获取父页面的文本值子页面直接获取： var yearMin = $(’\yearMin’, parent.document).val();

浅浅的花香味﹌/ 2022年03月20日 05:21/ 0 赞/ 385 阅读

相关 iframe 父页面调用子页面方法

<script type="text/javascript"> //调用子页面的方法. var childWi

￡神魔★判官ぃ/ 2022年03月14日 09:36/ 0 赞/ 1192 阅读

相关 jQuery iframe父页面和子页面相互调用

jQuery操作iframe父子页面相互操作父页面调用子页面子页面调用父页面父页面调用子页面根据iframe的id找到子页面，取

悠悠/ 2022年01月14日 10:07/ 0 赞/ 550 阅读

相关 iframe子页面获取父页面的点击事件

子页面a.php代码如下： <a href="ad.php" id="pic_ad" target="_blank"><img src="/upload/ad/luc

古城微笑少年丶/ 2021年10月30日 06:50/ 0 赞/ 468 阅读

相关 iframe 框架父页面刷新子页面

1.父页面添加： <script>　 function testBtn()\{ 　　 var reshSrc = document.getElementById('

向右看齐/ 2021年09月30日 14:38/ 0 赞/ 719 阅读