Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > iframe父子窗口互相调用总结

    iframe父子窗口互相调用总结

    HTML5 herman 2968浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    关于 iframe 父窗口和子窗口相互的调用方法，我这里做个总结，方便以后用到。

    父窗口调用iframe子窗口方法

    1. HTML语法：<iframe name="myFrame" src="child.html"></iframe> 
    2. 父窗口调用子窗口：myFrame.window.functionName(); 
    3. 子窗品调用父窗口：parent.functionName(); 
    4. 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行。

    下面是iframe父子窗口整在一起的例子： 

    <html> 
<head> 
<script type="text/javascript"> 
	function say1() { 
		alert("parent.html------>I'm at parent.html"); 
	} 
	function callChild() { 
		//document.frames("myFrame").f1(); 
		myFrame.window.say(); 
	} 
	// 业余草：www.xttblog.com
	function say2(){ 
		alert("child.html--->I'm at child.html"); 
	} 
	function callParent() { 
		parent.say(); 
	} 
</script> 
</head> 
<body> 
<input type=button value="调用child.html中的函数say1()" onclick="callChild()"> 
<iframe name="myFrame" src="child.html"></iframe> 
<input type=button value="调用parent.html中的say2()函数" onclick="callParent()"> 
</body> 
</html>

    iframe 父窗口和子窗口相互的调用方法

    IE中使用方法：

    • 父窗口调用子窗口：iframe_ID.iframe_document_object.object_attribute = attribute_value 
      例子：onClick="iframe_text.myH1.innerText='http://www.xttblog.com';" 
    • 子窗口调用父窗口：parent.parent_document_object.object_attribute = attribute_value 
      例子：onclick="parent.myH1.innerText='http://www.xttblog.com';" 

    Firefox中使用方法： 

    上面在IE下没有问题，但在firefox下不正常。在firefox下，应该是如下调用方法。

    • 父窗口调用子窗口：window.frames[“iframe_ID”].document.getElementById("iframe_document_object"­).object_attribute = attribute_value 
      例： window.frames[“iframe_text”].document.getElementById("myH1").innerHTML= "http://www.codedq.net"; 
    • 子窗口调用父窗口：parent.document.getElementById("parent_document_object").object_attribute = attribute_value 
      例： parent.document.getElementById("myH1").innerHTML = "http://www.codedq.net"; 

    时间关系，相关例子就不在贴了。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » iframe父子窗口互相调用总结

    相关文章推荐