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

最新推荐文章于 2022-09-21 11:07:48 发布

wawa129

最新推荐文章于 2022-09-21 11:07:48 发布

阅读量106

点赞数

分类专栏： js 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/wawa129/article/details/84294290

版权

js 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

一、父窗口调用iframe子窗口方法

1、HTML语法：<iframe name="myFrame" src="child.html"></iframe>

2、父窗口调用子窗口：myFrame.window.functionName();

3、子窗品调用父窗口：parent.functionName();

简单地说,也就是在子窗口中调用的变量或函数前加个parent. 就行

4、父窗口页面源码：

1.< html >
2.< head >
3.< script type = "text/javascript" >
4.
5.function say() {
6. alert("parent.html------ > I'm at parent.html");
7. }
8.
9.function callChild()
10.{
11. //document.frames("myFrame").f1();
12. myFrame.window.say();
13.}
14.</ script >
15.</ head >
16.
17.< body >
18.< input type = button value = "调用child.html中的函数say()" onclick = "callChild()" >
19.< iframe name = "myFrame" src = "child.html" > </ iframe >
20.</ body >
21.</ html >
5、子窗口页面：

1.< html >
2.< head >
3.< script type = "text/javascript" >
4.
5.function say()
6.{
7. alert("child.html--- > I'm at child.html");
8.}
9.
10.function callParent() {
11. parent.say();
12. }
13.</ script >
14.</ head >
15.< body >
16.< input type = button value = "调用parent.html中的say()函数" onclick = "callParent()" >
17.</ body >
18.</ html >
二、iframe 父窗口和子窗口相互的调用方法

1、IE中使用方法：

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

2、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://hi.zfrong2000.cn ";
子窗口调用父窗口：parent.document.getElementById("parent_document_object").object_attribute = attribute_value
例： parent.document.getElementById("myH1").innerHTML = "http:// zfrong2000 .cn ";

3、完整的例子
test.htm

1.< HTML >
2. < HEAD >
3. < TITLE > Test Page </ TITLE >
4. < script src = "prototype-1.4.0.js" > </ script >
5. < script language = "javascript" >
6. function show()
7. {
8. window.frames["iframe_text"].document.getElementById("myH1") .innerHTML = "http://hi.wonsoft.cn" ;
9. }
10. </ script >
11. </ HEAD >
12. < BODY >
13. < iframe height = "350" width = "600" src = "iframe_test.htm" name = "iframe_text" > </ iframe >
14. < form action = "" method = "post" >
15. < input name = "haha" id = "haha" type = "text" maxlength = "30" value = "haha" />
16. < br />
17. < textarea cols = "50" rows = "5" id = "getAttributeMethod" > </ textarea >
18. < input type = "button" onClick = "show();" value = "提交" />
19. </ form >
20. < h1 id = "myH1" > d </ h1 >
21. </ BODY >
22.</ HTML >
frame_test.htm

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.< html xmlns = "http://www.w3.org/1999/xhtml" >
3. < head >
4. < meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />
5. < title > 无标题文档 </ title >
6. </ head >
7. < script language = "javascript" >
8. function show()
9. {
10. parent.document.getElementById("myH1") .innerHTML = http:// zfrong2000 .cn ;
11. }
12. </ script >
13. < body >
14. < h1 id = "myH1" > ha </ h1 >
15. < form action = "" method = "post" >
16. < input name = "abc" id = "abc" type = "text" maxlength = "30" value = "abc" />
17. < br />
18. < textarea cols = "50" rows = "10" id = "text" > </ textarea >
19. < br />
20. < input type = "button" value = "提交" onclick = "show();" />
21. </ form >
22. </ body >
23.</ html >
test.htm里面firefox下访问iframe 必须用name，不能用id，所以要改为name="iframe_test" 。

wawa129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe 父窗口和子窗口相互的调用方法集锦

一、父窗口调用iframe子窗口方法 1、HTML语法： 2、父窗口调用子窗口：myFrame.window.functionName();3、子窗品调用父窗口：parent.functionName();简单地说,也就是在子窗口中调用的变量或函数前加个parent. 就行4、父窗口页面源码：1.< html > 2.< head > ...
复制链接

扫一扫