本文主要是介绍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");
这篇关于Iframe框架的各种操作，专治各种不服的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
