iframe元素用法总结-东北IT网

iframe元素用法总结

http://www.dbit.cn　2009-12-23 18:55:00 　来源:东北IT网　编辑:叶子

在 iframe 内容源文档，background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent。

具体事例

1. 包含框架页的代码。

1.   
2.<body bgColor="#eeeeee"> <iframe allowTransparency="true" src="transparent.htm"> </iframe>

2.transparent.htm页的代码。

1.   
2.<body bgColor="transparent">

对iframe进行操作：

   
var obj = document.getElementById(“iframe”);//获取对象  
var dom = document.all.frames[“iframe”];//获取DOM

如果只想改变iframe的 src 或者 border ，scrolling 等attributes(与property不是一个概念,property是不能写在标签内的，比如:scrollHeight，nnerHTML等)，就需要用到第一种方法。

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

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

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

控制Iframe中的页面的样式

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title></title> 
</head> 
<body> 
<iframe id="FF" src="B.htm"></iframe> 
<input type="submit" value=" OK " onclick="OK()"/> 
  
<script language="JavaScript"> 
function OK() 
{ 
    // 操作iframe中内容的CSS 
    var iframe = document.getElementById('FF'); 
    var body = iframe.contentWindow.document.body; 
  
    body.style.marginTop = 50; 
    body.style.padding = 0; 
    body.style.fontSize = 30; 
    body.style.textAlign = 'center'; 
    body.style.backgroundColor = 'red'; 
    body.style.color = 'blue'; 
} 
</script> 
</body> 
</html>

去掉动态创建的iframe的边框

   
var iframe = document.createElement('iframe'); 
iframe.scrolling="no";//这两个属性的设置缺一不可。 
iframe.frameborder="no";

window跟iframe标签是两回事 iframe的contentWindow属性是它里面的window

用getElementById才能取到iframe标签 ie直接用id得到的是里面的window

有关高度自适应问题

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

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

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

正确写法如下

1.var MainFrame = parent.document.getElementById("main"); 
2.MainFrame.style.height = document.documentElement.offsetHeight+"px";//最好在这上面还加上一个常数，如10

本新闻共4页,当前在第3页 1 2 3 4

【收藏】【打印】【进入论坛】