操作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元素。
父窗口获取iframea中的值
    父窗口设置iframea中的值
    父窗口设置iframea的h1标签背景色
--操作结果--
iframea.html布置一个h1标题，以及一个输入框和一个p段落，结构如下：
helloweba.com
iframe a
helloweba.com欢迎您！
iframeb.html同样布置h1标题和段落以及输入框。iframe有两个按钮，调用了javascript，相关代码等下在js部分会描述。
helloweba.com
iframe b 
helloweb.com
iframeb子窗口操作父窗口 
iframeb操作子窗口iframea
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中输入框里的值：+vala+;
}
function setvaliframea(){
    getiframedom(wiframea).getelementbyid('iframea_ipt').value = 'helloweba';
    document.getelementbyid(result).innerhtml = 设置了了子窗口iframea中输入框里的值：helloweba;
}
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=看到输入框里的值变化了吗？;
    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=
子窗口传来输入框值：+iframeb_ipt+
;
}
子页面iframeb.html可以通过使用parent.getiframedom()调用了负页面的自定义函数getiframedom()，从而就可以对平级的子页面iframea.html进行操作，子页面还可以通过使用parent.document操作父级页面元素。
本文结合实例讲解了javascript对iframe的基本操作，接下来我们会介绍iframe的应用：自适应高度以及iframe跨域问题，敬请关注。