脚本操作框架页面

测试环境：IE6、IE9、火狐

JQUERY引用地址：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

1、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());

2、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" noResizescrolling="no"target="">

<frameset id="mainframe"  border="1" frameSpacing="5" frameBorder="1"   cols ="50%,50%" runat="server">

<frameid="ifr2"name="ifr2"marginWidth="20%"marginHeight="100px"src="h16a-2.htm"noResize scrolling="no">

<framewidth="100%"  id="ifr3" name="ifr3" marginWidth="0" marginHeight="0" src="h16a-3.htm" noResizescrolling="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");

收藏于 2015-07-22