JavaScript对iframe的DOM操作
在IE6、IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在Firefox下却不可以使用,Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法,今天我在写实例的时候,通过IE8进行测试,IE8也是使用的符合W3C标准的 document.getElementById(ID).contentDocument 方法。所以我们可以写一个在IE和Firefox下通用的获取iframe document对象的函数—getIFrameDOM:
1 |
function getIFrameDOM(id){ |
2 |
return document.getElementById(id).contentDocument || document.frames[id].document; |
3 |
} |
如果我们要获取iframe的window对象,而不是document对象,可以使用document.getElementById(ID).contentWindow的方法。这样我们就可以使用子窗口中的window对象了,比如子窗口中的函数。
在子窗口中,我们可以通过parent就可以获得父窗口的window对象,如果假如我们在父窗口有一个函数为getIFrameDOM,我们可以通过parent.getIFrameDOM来调用,同理我们使用parent.document就可以在子窗口中访问父窗口的document对象了。
父级窗口操作iframe里的dom
JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器。
相关的还有一个contentDocument属性,这个属性是指指定的frame或者iframe所在的document对象,但是悲剧的是,ie6-ie7并不支持这个属性。
ie6和ie7还可以使用document.frames["iframe Name"]或者document.frames["iframe ID"]来获取相当于contentWindow属性,而firefox和chrome并不支持这些document.frames["iframe Name"]或者document.frames["iframe ID"],但是window.frames["iframe Name"]或window.frames[index](index是索引值)也支持所有主流浏览器。
我们知道document对象是window对象的一个子对象,所以我们可以通过document.getElementById("iframe ID").contentWindow.document来获取iframe的document对象,相当于contentDocument属性。
iframe里的js操作父级窗口的dom
iframe里的js要操作父级窗口的dom,必须搞懂几个对象:
- parent是父窗口(如果窗口是顶级窗口,那么parent==self==top)。
- top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)。
- self是当前窗口(等价window)。
- opener是用open方法打开当前窗口的那个窗口。
这样iframe里的js要操作父级窗口的dom可以通过parent,top这些对象来获取父窗口的window对象,例如:
1 |
parent.document.getElementById( "dom ID" ); |
parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;
虽然iframe在现在WEB开发中越来越少用到了,但是iframe还有很多值得使用的地方,比如使用iframe解决跨域问题.关于iframe还有很多东西要学习,比如iframe自适应高度,使用iframe解决跨域问题,iframe加载问题,iframe加载性能问题等等,还有很多东西要学习。
最后附上一个在指定iframe打开指定页面的HTML:
01 |
< div class = "refresh" style = "margin-right:4em;" > |
02 |
< label >< input type = "radio" name = "channel" onclick = "window.frames['usermessage-content-frame'].location.href='admin05_0.php';" />待审</ label > |
03 |
< label >< input type = "radio" name = "channel" onclick = "window.frames['usermessage-content-frame'].location.href='admin05_1.php';" />已审</ label > |
04 |
< label >< input type = "radio" name = "channel" onclick = "window.frames['usermessage-content-frame'].location.href='admin05_2.php';" />已删</ label > |
05 |
< label >< input type = "radio" name = "channel" onclick = "window.frames['usermessage-content-frame'].location.href='admin05.php';" checked = "checked" />全部</ label > |
06 |
</ div > |
07 |
< div class = "refresh" >< a href = "javascript:void(0);" onclick = "javascript:refreshContent('usermessage-content-frame');" >刷新</ a ></ div > |
08 |
09 |
< div id = "usermessage-content-div" class = "marginTop5 contentIFrame" > |
10 |
< iframe id = "usermessage-content-frame" name = "usermessage-content-frame" frameborder = "0" src = "page05.php" ></ iframe > |
11 |
</ div > |
JavaScript对iframe的DOM操作的更多相关文章
- iframe的Dom操作
我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理.也就是说我们需要在父级页面中操作子页面(ifram ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table& ...
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- JavaScript编程:使用DOM操作样式表
6.使用DOM操作样式表: 操纵元素的Style样式属性: background-color:style.backgroundColor color:style.col ...
- JavaScript的BOM、DOM操作、节点以及表格(二)
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- JavaScript(四)——DOM操作——Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- JavaScript(三)——DOM操作一
一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...
- Day4 JavaScript(二)dom操作
dom(文档对象模型) 文档结构 文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分 标签,文本, ...
随机推荐
- python 终级篇 django ---ORM操作
一般操作 必会的 ...
- (python)leetcode刷题笔记 02 Add Two Numbers
2. Add Two Numbers You are given two non-empty linked lists representing two non-negative integers. ...
- 大理石在哪儿 (Where is the Marble?,UVa 10474)
题目描述:算法竞赛入门经典例题5-1 #include <iostream> #include <algorithm> using namespace std; ; int m ...
- sql STUFF 分组
---将sql想关的数据放到一个字段里 select r.Region_Name, )) [text()] from City c2 inner join Region as r2 on c2.Reg ...
- [C++] Class (part 2)
Members that are const or reference must be initialized. Similary, members that are of a class type ...
- HDU 3268/POJ 3835 Columbus’s bargain(最短路径+暴力枚举)(2009 Asia Ningbo Regional)
Description On the evening of 3 August 1492, Christopher Columbus departed from Palos de la Frontera ...
- 《剑指Offer》题一~题十
一.赋值运算符函数 题目:如下为类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString { public: CMyString(char *pData = nul ...
- 条款03 尽可能使用const
一.概述 使用const约束对象:可以获得编译器的帮助(指出相关出错的地方) const与成员函数:const重载.转型.避免代码重复 二.细节 1. 为什么有些函数要返回const对象(看上去没必要 ...
- Xcode常见警告和错误
Xcode 升级后,常常遇到的遇到的警告.错误,解决方法 从sdk3.2.5升级到sdk 7.1中间废弃了很多的方法,还有一些逻辑关系更加严谨了.1,警告:“xoxoxoxo” is depreca ...
- 【Linux】- ps 命令
Linux ps命令用于显示当前进程 (process) 的状态. 语法 ps [options] [--help] 参数: -A 列出所有的行程 -w 显示加宽可以显示较多的资讯 -a ...