Javascript操作iframe框架经典案例
操作iframe对于许多的前段来讲觉得是一个不可靠的方式了,其实操作iframe是非常的不错并且兼容性也好,下面我们来看一个经典的关于操作iframe的例子.
虽然我们在web开发中使用iframe比较少,但是iframe还是有它值得使用的场景,比如嵌入外部广告等。在使用iframe过程中我们可能会遇到很多问题,例如iframe父子窗口传值,iframe自适应高度,iframe跨域通信等等。
实际应用中,我们常常要在父窗口中直接获取子窗口页面的元素,并对其进行操作。今天我来使用实例给大家介绍如何使用Javascript来进行iframe父子窗口之间相互操作dom对象,开始动手。
HTML
为了更好的讲解和演示,我们准备3个页面,父级页面index.html的html结构如下。另外两个子页面分别为iframeA.html和iframeB.html。我们需要演示通过父页面获取和设置子页面iframeA.html中元素的值,以及演示通过子页面iframeB.html设置子页面iframeA.html相关元素的值以及操作父页面index.html元素。
- <div class="opt_btn">
- <button onclick="getValiframeA();">父窗口获取iframeA中的值</button>
- <button onclick="setValiframeA();">父窗口设置iframeA中的值</button>
- <button onclick="setBgiframeA();">父窗口设置iframeA的h1标签背景色</button>
- </div>
- <div id="result">--操作结果--</div>
- <div class="frames">
- <iframe id="wIframeA" name="myiframeA" src="iframeA.html" scrolling="no" frameborder="1"></iframe>
- <iframe id="wIframeB" name="myiframeB" src="iframeB.html" scrolling="no" frameborder="1"></iframe>
- </div>
iframeA.html布置一个h1标题,以及一个输入框和一个p段落,结构如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>helloweba.com</title>
- </head>
- <body>
- <h1 id="title">iframe A</h1>
- <input type="text" id="iframeA_ipt" name="iframeA_ipt" value="123">
- <p id="hello">helloweba.com欢迎您!</p>
- </body>
- </html>
iframeB.html同样布置h1标题和段落以及输入框,iframe有两个按钮,调用了javascript,相关代码等下在js部分会描述.
- <html>
- <head>
- <meta charset="utf-8">
- <title>helloweba.com</title>
- </head>
- <body>
- <h1>iframe B</h1>
- <p id="hello">Helloweb.com</p>
- <input type="text" id="iframeB_ipt" name="iframeB_ipt" value="1,2,3,4">
- <button onclick="child4parent();">iframeB子窗口操作父窗口</button>
- <button onclick="child4child();">iframeB操作子窗口iframeA</button>
- </body>
- </html>
Javascript
页面html都布置好了,现在我们来看Javascript部分。
首先我们来看index.html父级页面的操作。JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器。
我们自定义了函数getIFrameDOM(),传入参数iID即可获取iframe,之后就跟在当前页面获取元素的操作一样了.
- function getIFrameDOM(iID){
- return document.getElementById(iID).contentWindow.document;
- }
index.html的三个按钮操作代码如下:
- function getValiframeA(){
- var valA = getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value;
- document.getElementById("result").innerHTML = "获取了子窗口iframeA中输入框里的值:<span style='color:#f30'>"+valA+"</span>";
- }
- function setValiframeA(){
- getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value = 'Helloweba';
- document.getElementById("result").innerHTML = "设置了了子窗口iframeA中输入框里的值:<span style='color:#f30'>Helloweba</span>";
- }
- function setBgiframeA(){
- getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc";
- }
保存后,打开index.html看下效果,是不是操作很简单了.
好,iframeB.html的两个按钮操作调用了js,代码如下:
- function child4child(){
- var parentDOM=parent.getIFrameDOM("wIframeA");
- parentDOM.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>看到输入框里的值变化了吗?</span>";
- parentDOM.getElementById('iframeA_ipt').value = document.getElementById("iframeB_ipt").value;
- parent.document.getElementById("result").innerHTML="子窗口iframeB操作了子窗口iframeA";
- }
- function child4parent(){
- var iframeB_ipt = document.getElementById("iframeB_ipt").value;
- parent.document.getElementById("result").innerHTML="<p style='background:#000;color:#fff;font-size:15px;'>子窗口传来输入框值:<span style='color:#f30'>"+iframeB_ipt+"</span></p>";
- }
子页面iframeB.html可以通过使用parent.getIFrameDOM()调用了负页面的自定义函数getIFrameDOM(),从而就可以对平级的子页面iframeA.html进行操作,子页面还可以通过使用parent.document操作父级页面元素。
本文结合实例讲解了Javascript对iframe的基本操作,接下来我们会介绍iframe的应用:自适应高度以及iframe跨域问题,敬请关注.