iframe

Posted 2020-08-07 发烧web开发者

iframe是一个非常有用的标签，先不说早期用它来模型Ajax效果，现在富本文编辑器它也绝对是主角。但是它又是一个特别的元素，最早出现IE4.0中，后纷纷被其他游览器吸纳，由于IE不开源，iframe在各游览器中都有很大差异。本文针对IE9、FF、Chrome三大浏览器进行分析。

1.获得iframe对象

  我们常用的获得iframe的方式一般有两种

  var obj = document.getElementById(“iframe”);//获取对象 

  var dom = window.frames[“iframe”];//获取DOM

  

  如果只想改变iframe的 src 或者 border ，scrolling 等attributes，就需要用到第一种方法。

  但是如果想取得iframe所包含的页面(不是iframe本身)。就需要使用第二种方法，因为它取得的是一个完整的DOM模型，比如想得到iframe的document.body的内容

操作iframe中的DOM元素，需要注意以下两点：

1. 必须先获取指定iframe的document
2. 对于1，必须在页面load完以后才能获取；

但是请注意：chrome浏览器只能使用在HTTP协议中，在本地js文件不支持Iframe包含页面的访问。

2.改变iframe本身的属性

  document.getElementById(“iframe”).src="a.html";

  document.getElementById(“iframe”).frameborder="200";

 

2.在父窗体中访问子窗体对象

var value=window.frames[“frm”].document.getElementById("txt").value;

window.frames[“frm”]是获得子窗口的window对象

 

3.在子窗口访问父窗口对象

var value=window.parent.document.getElementById("txt").value;

其中：window.parent是获得父窗口的window对象。

 

 

4.iframe高度自适应

scrollHeight返回的是一个数字，没有带单位

在IE 下如果没有DTD声明，则按loose.dtd 解析，在设置对像的宽高时，会自动的加上单位"px"

将iframe的高度设为document.body的高度，也并不一定能成功,因为document.body的高度可能没有整个档的高度大，如使用了层

正确写法如下

.在子页面中进行设置frame的高度

var frm=window.parent.document.getElementById("frm");//获得父窗口

frm.style.height=document.body.scrollHeight + "px";//设置父窗口的高度

 

5.contentWindow和contentDocument

我们开始使用window.frames["name"]获得frame中的页面window对象

使用document.getElementById(id)只能获得frame对象

但是通过frame对象的contentWindow属性或contentDocument也可以获得

在这里由于frame存在跨域访问限制，所以用法不一。

 

chrome：iframeElement.contentDocument
firefox：iframeElement.contentDocument
ie：element.contentWindow.document

代码

var dom=document.getElementById("frm");

var value;

if(dom.conentWindow){

value=dom.conentWindow.document.getElementById("txt").value;//IE

}else{

value=dom.conentDocument.getElementById("txt").value;//FF,chrome

}

 

 

总结：在网页中，iframe的用法非常多，主要应用于伪ajax、嵌套页面、页面重用。所以在网页中具有一定的重要性，本文主要

在iframe的对象获取、窗口互访问、自适应高度等常用功能进行分析代码实现，仅供参考