今天碰到一个浏览器兼容性的问题,是IE和Firefox下iframe DOM操作的差异。本文借IE和Firefox在iframe DOM操作的不同,进行分析说明JavaScript在DOM操作中两者的不同。
IE和Firefox对iframe document对象的差异性
在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:
functiongetIFrameDOM(id){
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}
P.S.:如果我们要获取iframe的window对象,而不是document对象,可以使用document.getElementById(ID).contentWindow的方法。这样我们就可以使用子窗口中的window对象了,比如子窗口中的函数。
在子窗口使用父窗口的函数,获取父窗口document对象
在子窗口中,我们可以通过parent就可以获得父窗口的window对象,假如我们在父窗口有一个函数为getIFrameDOM,我们可以通过parent.getIFrameDOM来调用,同理我们使用parent.document就可以在子窗口中访问父窗口的document对象了。
使用JavaScript进行iframe的DOM操作实例
首先,我们在父窗口中引入两个iframe子窗口,ID分别为wIframeA、wIframeB,地址分别为:a.html、b.html。
父窗口主要HTML代码如下:
<divid="pHello"style="margin:10pxauto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数,来替换哦~</div>
<iframeid="wIframeA"name="myiframeA"src="a.html"scrolling="no"frameborder="0"></iframe>
<iframeid="wIframeB"name="myiframeB"src="b.html"scrolling="no"frameborder="0"></iframe>
在子窗口A、B中我放了一个ID为hello的P,以方便我们进行DOM操作演示,子窗口A、B的主要HTML代码如下:
<pid="hello">HelloWorld!</p>
1、在iframe中,父窗口操作子窗口的DOM
建好了父窗口跟子窗口,这样我们可以在父窗口中,通过以下iframeA()函数来把子窗口A更换P的背景颜色为红色:
functioniframeA(){//给子窗口A改变ID为hello的背景色
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.background="red";
}
functiongetIFrameDOM(id){//兼容IE、Firefox的iframeDOM获取函数
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}
2、在iframe中,子窗口操作父窗口的DOM
在子窗口中,我们可以方便的进行父窗口DOM操作,只需要在DOM操作之前添加一个parent对象的方法就可以了,如:在上面的子窗口B中,我们可以使用下面的代码把,父窗口中ID为“pHello”的内容给替换掉:
parent.document.getElementById("pHello").innerHTML="<pstyle='background:#000;color:#fff;font-size:15px;'>O(∩_∩)O哈哈~用子窗口B就可以替换你!不服吗?</p>";
3、在iframe中,子窗口A操作子窗口B的DOM
既然子窗口可以操作父窗口的window对象和document对象,那么子窗口也可以操作另外的子窗口的DOM。如以下的代码:
vara=parent.getIFrameDOM("wIframeA");
a.getElementById('hello').innerHTML="<spanstyle='color:blue;font-size:18px;background:yellow;'>看,俺子窗口B也能DOM你A!</span>";
分享到:
相关推荐
javascript解决浏览器兼容性问题
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
JavaScript中BOM和DOM详解 目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 ...兼容性写法,封装工具 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2
web前端浏览器兼容性问题,以及其他新知识点:例如SEO javascript mate等问题
Javascript操作XML Dom学习资料
JavascriptDOM基本操作 dom 精品操作
javascript解决innerText浏览器兼容问题思路代码.docx
显示农历的JavaScript,高浏览器兼容性。兼容IE、FireFox、Chrome、Opera、Safari等浏览器,显示效果完全一样。 显示效果示例: 2009年11月3日 星期二 【牛】甲戌月 壬子日 己丑年 九月十七 可在尾部自己修改...
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
作为一个Web前端工作者,你是否在工作中常被浏览器兼容性问题所困惑.例如Css样式? 明明在 IE浏览器里显示一切正常的网页.到了FireFox或谷歌浏览器中却乱作一团.或许你在使用JavaScript和Dom编写网页脚本时,也...
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave ...
最新最全的javascript和css浏览器兼容手册,欢迎有需要的下载,
javascript_DOM操作.rar
本文是软件开发网小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧! 1. children与childNodes IE提供的children、childNodes和firefox下...
JavaScript中Dom操作实例详解.docx
读者将看到JavaScript、 HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计,掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强 Web页面的必备技术;同时,还将对如何利用库提高开发效率有全面...
javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录
主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下
实现使用JavaScript DOM 操作实现网页局部刷新