使用JavaScript下进行iframe的DOM操作(考虑浏览器兼容性)
今天碰到一个浏览器兼容性的问题,是IE和Firefox下iframe DOM操作的差异。本文借IE和Firefox在iframe DOM操作的不同,进行分析说明JavaScript在DOM操作中两者的不同。
- function getIFrameDOM(id){
- return document.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代码如下:
- <iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" frameborder="0"></iframe>
- <iframe id="wIframeB" name="myiframeB" src="b.html" scrolling="no" frameborder="0"></iframe>
在子窗口A、B中我放了一个ID为hello的P,以方便我们进行DOM操作演示,子窗口A、B的主要HTML代码如下:
- <p id="hello">Hello World!</p>
1、在iframe中,父窗口操作子窗口的DOM
建好了父窗口跟子窗口,这样我们可以在父窗口中,通过以下iframeA()函数来把子窗口A更换P的背景颜色为红色:
- function iframeA(){//给子窗口A改变ID为hello的背景色
- var a = getIFrameDOM("wIframeA");
- a.getElementById('hello').style.background = "red";
- }
- function getIFrameDOM(id){//兼容IE、Firefox的iframe DOM获取函数
- return document.getElementById(id).contentDocument || document.frames[id].document;
- }
2、在iframe中,子窗口操作父窗口的DOM
在子窗口中,我们可以方便的进行父窗口DOM操作,只需要在DOM操作之前添加一个parent对象的方法就可以了,如:在上面的子窗口B中,我们可以使用下面的代码把,父窗口中ID为“pHello”的内容给替换掉:
- parent.document.getElementById("pHello").innerHTML="<p style='background:#000;color:#fff;font-size:15px;'>O(∩_∩)O哈哈~用子窗口B就可以替换你!不服吗?</p>";
3、在iframe中,子窗口A操作子窗口B的DOM
既然子窗口可以操作父窗口的window对象和document对象,那么子窗口也可以操作另外的子窗口的DOM。如以下的代码:
- var a=parent.getIFrameDOM("wIframeA");
- a.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>看,俺子窗口B也能DOM你A!</span>";
转载于:https://blog.51cto.com/phinecos/815580
使用JavaScript下进行iframe的DOM操作(考虑浏览器兼容性)相关推荐
- 04-前端技术_ javaScript内置对象与DOM操作
目录 五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...
- js_jQuery【下拉菜单联动dom操作】
下拉菜单联动dom操作案例 源码: <!DOCTYPE html> <html lang="en"><head><meta charset ...
- Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课:学习(12)
文章目录 系列目录 原项目地址 第37课:并发编程在爬虫中的应用 单线程版本 多线程版本 异步I/O版本 总结 第38课:抓取网页动态内容 Selenium 介绍 使用Selenium 加载页面 查找 ...
- JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
- JavaScript对XML的一些DOM操作
JavaScript写了个内部文件的解析小工具 写几点TIPS: 背景 有个内部格式的图形文件,每次用专用软件载入挺麻烦的,写个轻量小工具,方便读取.图新文件实质是XML文件.手头没有说明文档解释节点 ...
- javascript核心_javascript核心之DOM操作
JS一个重要功能就是操作DOM, 改变页面显示. 目录: 1.基本概念 2.节点类型 3.节点关系 4.节点操作 基本概念 DOM全称为Document Object Model ,即文档对象模型,是 ...
- 【JavaScript详解】JavaScript语言的特性以及DOM操作和表单操作
文章目录 1️⃣ 一.前端简介
- JavaScript自动设置IFrame高度(兼容各主流浏览器)
调用方式如下 <iframe id="ifm" name="ifm" οnlοad="SetIFrameHeight('ifm')" ...
- JavaScript DOM操作Select下拉框
DOM操作Select下拉框: 获取select选中的option值,修改选中的选项,添加选项option. <body> <script type="text/javas ...
最新文章
- pytorch之卷积模块、池化、激活函数(可视化)
- metasploit 模块和位置
- 对象后加一个值 php_PHP 对象使用
- linux tasklet函数,14.9.5 实例:Tasklet演示
- VTK:小部件之ImplicitPlaneWidget2
- 计算机和学数制和码制,[文学]第二章 计算机中的数制和码制.ppt
- 【目标定位】基于matlab循环增益卡尔曼滤波目标定位仿真【含Matlab源码 145期】
- WEB3.0全球高峰论坛暨2022中民协分布式存储专委会新春团拜会即将隆重启幕
- php+实现群发微信模板消息_php实现微信模板消息推送
- 8086+8255A写数码管Proteus仿真及8086Proteus仿真问题
- 小米笔记本PRO BIOS忘记密码后重置教程
- Android 根据名字获取经纬度,Android 根据城市获取经纬度 适配Android 7.0 、Android 8.0...
- 计算机控制系统模型,计算机控制系统的数学模型.ppt
- 如何用Java画一棵简单的圣诞树
- Qt 网络聊天室项目
- Java程序CPU飙升排查,找出死循环代码
- 三相异步电机基于模型的效率估计算法
- javascript 0基础入门
- Windows下如何启动Redis服务?
- 牛牛和DRB迷宫Ⅰ【动态规划】
热门文章
- 通过图灵测试!Google掌舵人说“打电话AI”是一次非凡突破
- 喜欢赌球的你,可能被AI盯上了
- “懒癌”患者福音:是时候找一个AI帮你做家务了
- python获取指定日期的前N天日期和后N天日期
- 一步步重构容器实现Spring框架——彻底封装,实现简单灵活的Spring框架(十一)...
- TensorFlow教程之API DOC 6.1.1Class tensorflow::Env
- 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中lt;meta-datagt;变量的值...
- 传输层协议TCP和UDP
- Keepalived原理详解
- [转]SQL2000修改表创建日期