iframe 父窗口与子窗口相互调用方法汇总

发布时间:2019-10-05编辑:脚本学堂
本文详细介绍了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.jb200.com';"
子窗口调用父 窗口:parent.parent_document_object.object_attribute = attribute_value
例 子:onclick="parent.myh1.innertext='http://www.jb200.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.baidu.com ";
 

子窗口调用父窗 口:
parent.document.getelementbyid("parent_document_object").object_attribute = attribute_value
例:
 

复制代码 代码示例:
parent.document.getelementbyid("myh1").innerhtml = "http:// baidu.com";

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.baidu.com" ;
}
</ 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>

test.htm里面firefox下访问iframe 必须用name,不能用id,所以要改为name="iframe_test" 。

三、在c#中如何动态改变iframe的src值,动态指向一个网页

1)如果是javascript脚本  
  给iframe加一个id如<iframe   id=frmlist…… 
  在脚本写 
  frmlist.document.location=strnewurl  

2)如果是后台程序  
  给iframe加一个id,再加上runat=server   如<iframe   id=frmlist   runat=server   ……   
  在程序里写 
  frmlist.attributes.add("src",strnewurl);