frame、iframe 用法总结

通用选择对象
function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (yers && yers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return yers[objectId];
} else {
return false;
}

}



从a号FRAME 访问B号FRAME中的对象时
如果被访问的对象是没有关闭符的对象如

只能用 Documet.all.ID（或name)访问如：
parent.frames.mainFrame.document.all.HfUserId.value=RowId.id.substr(2);

如果被访问的对象是有关闭符的对象如：
adfasdf
则可用ID访问如：
parent.frames.bottomFrame.save.innerHTML="
正在读取数据,请稍等..."



框架编程概述
一个HTML页面可以有一个或多个子框架，这些子框架以
test.htm文件代码为:

hello,my boy

如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:

document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：

hello,my wife

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
或者parent.document.getElementById("myH2").innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

3:frame的一个子元素访问frame的另一个子元素
例如：框架文件frame.html中嵌入了另外两个html文件

那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的标签的innerHTML属性，则可以这样：
alert(parent.document.search.section.innerHTML),其中search是“搜索”div的id，或者：
alert(parent.document.getElementById("search").section.innerHTML),
或者也可以这样：
alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)
但是以上这些方法都不怎么好用，因为iframe不是标准HTML标签，因此这些方法总是时不时地失灵，因此最好使用下面的方法：
obj = parent.document.getElementById("frameSearch").contentWindow
obj=obj.document.getElementById("section")
obj.innerHTML="大家好！"
这种方法屡试不爽，关于具体的介绍，见下面的第四节（用JS访问操作iframe里的dom完全攻略！）
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。试想一下，通 过Iframe标记，我们

可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工 劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
4:最适用的iframe内部和外部元素的访问方法（在各个浏览器中都适用，并且不会失灵，而上面介绍的那些方法中，很多用过一两次后就失灵了）
请见下一个文本框。
四：（重重之点）用JS访问操作iframe里的dom完全攻略！
两个页面，一个页面是iframe所在页面(页面名称：iPage.html)，另一个页面是iframe属性src指向页面（页面名称：srcPage.html）。
iPage.html，里dom：

srcPage.html，里dom：

妹妹的一天

早上吃早点，中午约会吃饭，下午K歌，晚上和哥哥瞎折腾

下面讨论ie下JS是怎么操作以上两个页面，再讨论firefox的做法，最后给出兼容ie,firefox浏览器操作iframe对象的方法。
一、ie下访问操作iframe里内容
大家都知道iframe是非标准html标签，它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话，嘿嘿)
1. ie通过document.frames["IframeName"]获取它，例子：我们在iPage.html里输出srcPage.html里h1的内容，JS如下，firefox下document.frames 没有定义错误提示：
window.onload = (function () {
alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);});
2. ie另一种方法contentWindow获取它，代码：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘).contentWindow;
alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过，好事啊！嘿嘿。（网上一查，发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞，有脚本注入攻击的危险。
后来听说可以在后台防止这样的事情发生，算是松了口气。不过还是希望firefox新版本可以解决这样的危险。）
3.改变srcPage.html里h1标题内容，代码：
iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘;
通过contentWindow后访问里面的节点就和以前一样了。
二、firefox下访问操作iframe里内容
Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准，通过标准可以少写一个document,代码：
var iObj = document.getElementById(‘iId‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);
alert(iObj.getElementsByTagName(‘p‘)[0].firstC

hild.data);
兼容这两种浏览器的方法，现在也出来了，就是使用contentWindow这个方法。
嘿嘿！操作iframe是不是可以随心所欲了呢？如果还觉得不爽，你甚至可以重写iframe里的内容。
三、重写iframe里的内容
通过designMode（设置文档为可编辑设计模式）和contentEditable（设置内容为可编辑），你可以重写iframe里的内容。代码：
var iObj = document.getElementById(‘iId‘).contentWindow;
iObj.document.designMode = ‘On‘;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(‘‘);
iObj.document.writeln(‘‘);
iObj.document.writeln(‘‘);
iObj.document.close();
这两个对象的资料可参考：/en-us/library/ms533720(VS.85).aspx
四、iframe自适应高度
有了上面的原理要实现这个相当简单，就是把iframe的height值设置成它里面文档的height值就可以。代码：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘);
iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;});
现在对JS操作iframe你已经有了全新的认识，说不定那天会因为这个有什么新的web技术名词，嘿嘿，臭美下！
PS:
1. Document.designMode ,Document.contentEditable在你这里的使用场景错了,他一般是应用在在线编辑器上的,如果你并不是开放给用户操作的话,根本没必要设置这个属性!
2. 另外之所以要用 window.onload,是因为页面加载中,iframe的加载顺序是在最后的,也就是说,在没用window.onload的情况下,在执行你那段js的时候iframe里的dom都还没加载到,这样自然是无输出的了
3. 如果是在两个不同的子域下，上面的代码需要做小的改动。
调用iframe的页面和被iframe的页面需要增加设置 document.domain 的代码，指明同一个根域即可。
参考资料：
https:///cn/Migrate_apps_from_Internet_Explorer_to_Mozilla
/en-us/library/ms533690(VS.85).aspx
/webpagedesign/20080516/8536.html
/jsj/safe/2006-10-05/8156.html
此外，用DOM方法与jquery方法结合的方式：
1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe框架的：
3.Try this:
$("#myid", top.document);
the top.document tells the selector to target t

he myid element which
exists in the topmost document (your parent page). In order for this
to work, jquery must be loaded in the file which is viewed through the
iframe.
我的代码
$('#parentElem', top.document).append('

');
--end--


=============================================================
我们通过Javascript可以动态加载操作iframe对象属性src属性指向的html页面的内容。这样的操作需要提供两个页面，一个页面是iframe所在页面(页面名称：iPage.html)，另一个页面是iframe属性src指向页面（页面名称：srcPage.html）。

iPage.html，里dom：


srcPage.html，里dom：

Hello World--七哥工作室

一、ie下访问操作iframe里内容
大家都知道iframe是非标准html标签，它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。

1. ie通过document.frames["IframeName"]获取它，例子：我们在iPage.html里输出srcPage.html里h1的内容，JS如下：

alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
你会发现这样在页面里加入代码，好像并没有输出想要的东东，为什么呢？这个我也没有搞清楚，只是习惯性的加入了window.onload就有输出了（注：JS代码都写到这个事件里去），知道的人士可否告诉我下。why?更改之后代码ie下有了输出，firefox下document.frames没有定义错误提示：

window.onload = (function () {
alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
2. ie另一种方法contentWindow获取它，代码：

window.onload = (function () {
var iObj = document.getElementById(‘iId‘).contentWindow;
alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过，好事啊！嘿嘿。（网上一查，发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞，有脚本注入攻击的危险。
后来听说可以在后台防止这样的事情发生，算是松了口气。不过还是希望firefox新版本可以解决这样的危险。）

3.改变srcPage.html里h1标题内容，代码：
iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘;
通过contentWindow后访问里面的节点就和以前一样了。

二、firefox下访问操作iframe里内容
Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准，通过标准可以少写一个document,代码：
var iObj = document.getElementById(‘iId‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘php自学网‘);
alert(iObj.getElementsB

yTagName(‘p‘)[0].firstChild.data);
兼容这两种浏览器的方法，现在也出来了，就是使用contentWindow这个方法。
操作iframe是不是可以随心所欲了呢？如果还觉得不爽，你甚至可以重写iframe里的内容。

三、重写iframe里的内容
通过designMode（设置文档为可编辑设计模式）和contentEditable（设置内容为可编辑），你可以重写iframe里的内容。代码：

var iObj = document.getElementById(‘iId‘).contentWindow;
iObj.document.designMode = ‘On‘;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(‘‘);
iObj.document.writeln(‘‘);
iObj.document.writeln(‘‘);
iObj.document.close();
这两个对象的资料可参考：
注释掉 iObj.document.designMode = ‘On’;
iObj.document.contentEditable = true;

效果没有变，时间效率是注释前的将近三倍。嘿嘿。那两个对象是参考网络一些人的写法，重写iframe里内容，其实没有必要用designMode和contentEditable，除非有其他的需求。

四、iframe自适应高度
有了上面的原理要实现这个相当简单，就是把iframe的height值设置成它里面文档的height值就可以。代码：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘);
iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;
});