使用JavaScript进行iframe的DOM操作

使用JavaScript可以方便的进行iframe的DOM操作

若是在本地测试，可直接使用IE和FireFox，使用chrome则需要执行chrome --disable-web-security

禁用chrome的WEB安全限制则可以在本地进行测试，代码如下：

iframe_dom.html

<!DOCTYPE html">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe DOM操作[demo]|使用JavaScript来进行iframe的DOM操作 |by WYQ</title><style type="text/css">
body {margin: 0;padding: 0;
}#wIframeA,#wIframeB {width: 400px;height: 400px;float: left;
}
</style></head><body><h1 style="text-align: center">使用JavaScript在IE和Firefox下进行iframe的DOM操作[demo]</h1><div style="margin: 10px auto; width: 300px; height: 40px;"><input type="button" value="父窗口操作iframeA" οnclick="iframeA();"style="width: 150px; float: left;" /><input type="button" value="父窗口操作iframeB" οnclick="iframeB();"style="width: 150px; float: left;" /></div><div id="pHello"style="margin: 10px auto; width: 360px; height: 30px;">此处可通过iframeB的JavaScript函数，来替换哦~</div><div style="margin: 10px auto; width: 810px; height: 300px;"><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></div><script type="text/javascript">
function iframeA() {var a = getIFrameDOM("wIframeA");a.getElementById('hello').style.background = "red";
}
function iframeB() {var a = getIFrameDOM("wIframeB");a.getElementById('hello').style.background = "green";
}
function getIFrameDOM(id) {return document.getElementById(id).contentDocument|| document.frames[id].document;
}
</script></body>
</html>

a.html

<!DOCTYPE html">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>iframe DOM操作 _iframeA|by WYQ</title></head><body><h1>I am iframe A</h1><p id="hello">Hello World!</p></body>
</html>

b.html

<!DOCTYPE html">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>iframe DOM操作 _iframeB|by WYQ</title></head><body><h1>I am iframe B</h1><p id="hello">Hello World!</p><button οnclick="child4parent();" style="width:180px;float:left;">iframeB子窗口操作父窗口</button><button οnclick="child4child();" style="width:150px;float:left;">iframeB操作子窗口A</button><script type="text/javascript">function child4child(){var a=parent.getIFrameDOM("wIframeA");a.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>看，俺子窗口B也能DOM你A！</span>";}function child4parent(){parent.document.getElementById("pHello").innerHTML="<p style='background:#000;color:#fff;font-size:15px;'>O(∩_∩)O哈哈~用子窗口B就可以替换你！不服吗？</p>";}</script></body>
</html>

使用JavaScript进行iframe的DOM操作相关推荐

使用JavaScript下进行iframe的DOM操作（考虑浏览器兼容性）
今天碰到一个浏览器兼容性的问题,是IE和Firefox下iframe DOM操作的差异.本文借IE和Firefox在iframe DOM操作的不同,进行分析说明JavaScript在DOM操作中两者的 ...
JavaScript（五）—— Web APIs 简介/JavaScript 必须掌握的 DOM 操作 (丰富案例 + 思维导图）
本篇为 JavaScript 系列笔记第五篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
JavaScript和jQuery的DOM操作
1.创建元素节点传统的javascript方法,创建元素节点程序代码 var a = document.createElement("p"); jQuery中创建节点的方法是 ...
JavaScript那些事儿（1）：对比JavaScript和jQuery的Dom操作
正在着手看<javascript权威指南>,整理点儿笔记,也算是督促自己学习,每天看一点,特立此贴,希望自己能坚持下去. 对比:用javascript和jQuery分别判断某元素是否存在, ...
04-前端技术_ javaScript内置对象与DOM操作
目录五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...
JavaScript（六）—— DOM 事件高级
本篇为 JavaScript 系列笔记第六篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
JavaScript之BOM和DOM入门
JavaScript之BOM和DOM入门 JavaScript的组成包含三大部分,分别为ECMAScript.DOM和BOM.JavaScript组成,如下图所示: ECMAScript是JavaSc ...
加速Javascript：DOM操作优化
原文:<Speeding up JavaScript: Working with the DOM> 作者: KeeKim Heng, Google Web Developer 在我们开发互 ...
03.JavaScript对DOM操作
JavaScript引入方式外部引入在head或者body中,添加以下代码 <script type="text/javascript" src="js/dem ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

使用JavaScript进行iframe的DOM操作

使用JavaScript进行iframe的DOM操作相关推荐

最新文章

热门文章