Iframe框架的各种操作，专治各种不服

脚本操作框架页面
测试环境IE6、IE9、火狐
JQUERY引用地址

一、IFRAME框架

页面示例

        <iframe id="ifr1"  frameborder="1" scrolling="no"   src="H16-1.htm" style="width: 45%; height: 
250px"></iframe> 
<iframe id="ifr2" frameborder="1" scrolling="no"   src="H16-2.htm" style="width: 45%; height: 
250px"></iframe>
      

父页面包含两个子框架 分别是 IFR1 IFR2

1父页面调用子页面

A、父页面获取IFR1框架内的文本框并且写入内容

        var obj = document.getElementById("ifr1").contentWindow;  
//JQUERY方法 
//$("#txt1",obj.document).val("父页面写入子页面" + Math.floor(Math.random()*1000)); 
//JAVASCRIPT方法 
obj.document.getElementById("txt1").value = "11父页面写入子页面" + 
Math.floor(Math.random()*1000);

      

B、父页面调用框架页面的函数AddMsg为IFR1框架内的

函数

        var obj = document.getElementById("ifr1").contentWindow;  
obj.AddMsg("父页面调用子页面函数写入信息" + Math.floor(Math.random()*1000));

      

C、父页面重写子框架链接

//重写子框架链接

        //JQUERY方法 
//$("#ifr1").attr("src",$("#ifr1").attr("src")); 
//JAVASCRIPT方法 
window.document.getElementById("ifr1").src = window.document.getElementById("ifr1").src;

      

D、使用[]方式获取框架对象

        //使用[]方式获取框架对象 
//JQUERY方法 
//$(window.frames["ifr1"].document).find("input[type='radio']").attr("checked","true"); 
//JAVASCRIPT方法 
window.frames["ifr1"].document.getElementById("txt1").value = "11这是父页面写入的内容";

      

2框架页操作父页面

A、获取父页面元素并且赋值

        //获取父页面元素  并且写入数据 
//JQUERY方法 
//$("#msg",parent.window.document).html("获取父页面元素并且写入数据" + 
Math.random()); 
//JAVASCRIPT方法 
parent.window.document.getElementById("msg").innerHTML = "11获取父页面元素并且写入
数据" + Math.random();

      

B、调用父页面函数

        //调用父页面函数  AddMsg---父页面函数 
parent.window.AddMsg("11调用父页面函数写入内容" + Math.random());

      

3兄弟框架互操作

A、获取兄弟框架元素并赋值

        //获取兄弟框架元素 并且写入数据  IFR2获取IFR1中的元素 
//JQUERY方法 
//$("#ifr1",parent.document).contents().find("#txt2").val("这是框架IFR2写入的" + 
Math.random()); 
//JAVASCRIPT方法 


parent.document.getElementById("ifr1").contentWindow.document.getElementById("txt2").value = "11这是框架IFR2写入的" + Math.random();

      

B、调用兄弟框架函数

        //调用兄弟框架函数  IFR2调用IFR1中的函数 
//JQUERY方法 
//$("#ifr1",parent.document)[0].contentWindow.AddMsg("这也是框架2调用1的函数写入的" + 
Math.random()); 
//JAVASCRIPT方法 
parent.document.getElementById("ifr1").contentWindow.AddMsg("11这也是框架2调用框架1
的函数写入的" + Math.random());

      

二、FRAMESET框架

页面示例

        <frameset id="framesx" border="1" frameSpacing="5" rows="165,*" frameBorder="1" 
runat="server" width="100%"> 
    <frame id="ifr1" name="ifr1" frameSpacing="5" marginWidth="0" marginHeight="0" 
src="h16a-1.htm" noResize scrolling="no" target=""> 
 <frameset id="mainframe"  border="1" frameSpacing="5"  frameBorder="1"   cols 
="50%,50%" runat="server"> 
     <frame id="ifr2" name="ifr2" marginWidth="20%" marginHeight="100px" 
src="h16a-2.htm" noResize scrolling="no"> 
     <frame width="100%"  id="ifr3" name="ifr3" marginWidth="0" marginHeight="0" 
src="h16a-3.htm" noResize scrolling="auto"> 
 </frameset> 
</frameset>
      

页面分为上--左右模式 上面是IFFR1 左面是IFR2 右面是IFR2

在火狐测试时发现必须使用NAME属性建议将ID和NAME设置为

相同的名字

1获取其他框架元素并赋值

本例通过上部页面IFR1操作左侧页面IFR2

        //JQUERY方法 
//$("#div",window.parent.frames["ifr2"].document).html("获取兄弟框架并且写入数据" + 


Math.random()); 
//JAVASCRIPT方法 
window.parent.frames["ifr2"].document.getElementById("div").innerHTML = "1获取兄弟框架并且写入数据" + Math.random();

      

2调用其他框架页面函数

        //JQUERY 
//$(window.parent.frames["ifr2"])[0].add("调用兄弟框架函数"); 
//JAVASCRIPT方法 


window.parent.frames["ifr2"].add("调用兄弟框架函数11");