iframe父窗口和子窗口相互的调用方法解决方案[详细][全]

最新推荐文章于 2024-02-22 16:42:06 发布

zfrong

最新推荐文章于 2024-02-22 16:42:06 发布

阅读量1.2k

点赞数

分类专栏：互联网/网络文章标签： iframe firefox object javascript server 脚本

互联网/网络专栏收录该内容

23 篇文章 0 订阅

订阅专栏

iframe父窗口和子窗口相互的调用方法解决方案[详细][全]

来源:互联网收集分享:QQ1663551688

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

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

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

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

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

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

4、父窗口页面源码：

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

5、子窗口页面：

 
 < html >     
< head >     
< script   type = "text/javascript" > 
       
function say()    
{    
          alert("child.html--- > I'm at child.html");    
}  
function callParent() { 
   parent.say(); 
   }  
</ script >     
</ head >     
< body >     
< input     type = button     value = "调用parent.html中的say()函数"     onclick = "callParent()" >     
</ body >     
</ 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

 
 < HTML > 
     < HEAD > 
         < TITLE >  Test Page  </ TITLE > 
         < script   src = "prototype-1.4.0.js" > </ script > 
         < script   language = "javascript" > 
            function show() 
            { 
                window.frames["iframe_text"].document.getElementById("myH1") .innerHTML  =  "http://hi.wonsoft.cn" ; 
            } 
         </ script >   
     </ HEAD > 
     < BODY > 
         < iframe   height = "350"    width = "600"   src = "iframe_test.htm"   name = "iframe_text" > </ iframe > 
         < form   action = ""   method = "post" > 
             < input   name = "haha"   id = "haha"   type = "text"   maxlength = "30"   value = "haha"   /> 
             < br   /> 
             < textarea   cols = "50"   rows = "5"   id = "getAttributeMethod" > </ textarea > 
             < input   type = "button"   onClick = "show();"   value = "提交" /> 
         </ form > 
         < h1   id = "myH1" > d </ h1 > 
     </ BODY > 
</ HTML > 
 

frame_test.htm

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
< html   xmlns = "http://www.w3.org/1999/xhtml" > 
   < head > 
     < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312"   /> 
     < title > 无标题文档 </ title > 
   </ head > 
   < script   language = "javascript" > 
    function show() 
    { 
      parent.document.getElementById("myH1") .innerHTML  =  http://  zfrong2000 .cn  ;  
    } 
   </ script > 
   < body > 
     < h1   id = "myH1" > ha </ h1 > 
     < form   action = ""   method = "post" > 
       < input   name = "abc"   id = "abc"   type = "text"   maxlength = "30"   value = "abc"   /> 
       < br   /> 
       < textarea   cols = "50"   rows = "10"   id = "text" > </ textarea > 
       < br   /> 
       < input   type = "button"   value = "提交"   onclick = "show();" /> 
     </ form > 
   </ body > 
</ html > 
 