|
蓝森林 http://www.lslnet.com 2006年8月25日 8:28
 [教程]iframe 的用法与注意事项
好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态.
注意两个事项,ifr 是一个以存在的 iframe 的 ID 和 NAME 值:
document.getElementById(“ifr”);
window.frames[“ifr”];
要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对).第一种方法只是取出了一个OBJECT而已.
如果只想改变iframe的 src 或者 border , scrolling 等 attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等),就需要用到第一种方法.
如果想取得iframe的页面(不是iframe本身),就需要使用第二种方法,因为它取得的是一个完整的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法.
还要注意的是,如果在iframe的页面未完全装入的时候,调用iframe的DOM模型,会发生很严重的错误,所以,你要准备一个容错模式.
下面是示例,一个是aa.htm,一个是bb.htm,请先考到本地在运行,原因不用我在说了吧!
aa.htm
[html]
<!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" >
<head>
<title>Untitled Page</title>
<style type="text/css">
<!--
body{
margin:0px;
}
-->
</style>
</head>
<body>
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>
</body>
</html>
<script language="javascript" type="text/javascript">
var aa_value="I'm a variant in Top window!";
var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];
alert("Alert from Top window : Can't get iframe's variant by ifr_id, it will return :" + ifr_id.bb_var);
alert("Alert from Top window : Can't get iframe's DOM model by ifr_id ,it will return :" + ifr_id.window);
alert("Alert from Top window : Get src from id :" + ifr_id.src);
alert("Alert from Top window : Get href from window:" + ifr_window.document.location.href);
//由于bb.htm可能还未装载完成,所以,下冇的可能引发错误
//调用iframe内的函数 ifr_window.bb();
//调用iframe内的变量
alert("Alert from Top window : " + ifr_window.bb_var);
//
alert("Alert from Top Window :" + ifr_window.document.body.innerHTML);
function aa(msg){
alert("I'm alerting from Top window ,and I received a msg:\n" + msg);
}
</script>
[/html]
bb.htm
[html]
<!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" >
<head>
<title>sub frame</title>
<style type="text/css">
<!--
html,body{
margin:0px;
width:90%;
}
-->
</style>
</head>
<body>
I'm a sub frame!
<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...
</body>
</html>
<script language="javascript" type="text/javascript">
var bb_var="I'm a variable in ifr";
function bb(){
alert("Alert from iframe :I'm frame ifr's function")
}
//获取父页面的变量
alert("Alert from iframe parent.ifr_id::" + parent.ifr_id);
alert("Alert from iframe parent.aa_value : " + parent.aa_value);
//通过父页面的ifr_id来改变 iframe的高度
alert("Alert from iframe : ifr's clientHeight :" +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;
alert("Alert from iframe : ifr's scrollHeight : " + document.body.scrollHeight);
//调用父窗体的函数:
parent.aa("I will calling a function which is Top window's ");
//改变父窗体的标题:
alert("Alert from iframe : I will changing Top window's title");
top.document.title="The title value changed";
//通过父窗体的ifr_id来改变的border 与scrolling
alert("Alert from iframe : I will change my border and scrolling :");
top.ifr_id.border=0;
top.ifr_id.scrolling="no";
</script>
[/html]
|
| 是否可以申请置顶几天? |
| 谢谢！！值得研究一下~~ |
| 正是偶需要的文章 得好好看看 |
| 这样啊,郁闷了很久没解决的疑问,十分感谢! |
欢迎提出问题.
我会尽我所能. |
| 楼主能不能提供类似 document.body.scrollHeight这样属性的列表啊 |
如果你裝了OFFICE（我这里装的是OFFICE2003）:你可以去找:
C:\Program Files\Microsoft Office\OFFICE11\1028\HTMLREF.CHM
它就是大全,不过,小心使用,因为它里面有相当一部分是IE ONLY |
好同志就是应该多交流，多学习。
很不错哈。 |
| 受用，谢谢 |
| 谢谢LZ了，刚好用到这个 |
| OFFICE是必备软件啊 我这就去找找看 谢谢哈 |
| 晕 偶装的2003 里面只有1033 2052这两,没有你说的那个 |
bluebox在上个帖子中说
[code]
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body >
<div id="x">
</div>
<script type="text/javascript">
<!--
var e = document.getElementById("x");
for ( a in e )
{
document.writeln( a + ": " + e[a] + "<br />");
}
-->
</script>
</body>
</html>
[/code] |
| 给个建议，在aa最后用脚本加载bb，在bb最后调用aa中得函数，这样肯定能行。 |
xling在上个帖子中说
我也是2003，怎么找不到1028这个文件夹？ |
| 找到了，在2052这个夹下，但是是英文版的，郁闷啊 |
请教一个菜问题：
iframe和框架frameset有什么区别？
我不是指二者的属性和写法有什么区别，是不明白这两个在使用上各有什么优缺点？为什么似乎iframe更受欢迎？等等。
谢谢！ |
补充说明:
ifr_id在IE和Opera下,是有一个document的,即ifr_id.document,但是注意不是ifr_id.window.document,fireFox下没有这个属性的.
如下所示:
[html]
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<iframe width="100%" height="200" src="about:blank" id="ifr" name="ifr"></iframe>
</body>
</html>
<script>
var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];
ifr_id.onreadystatechange=function(){//FireFox的iframe不支持onreadystatechange,
//alert(ifr_id.readyState)//opera的iframe没有readyState,但是ifr_id.document(注:不是ifr_id.window.document)有
if(this.readyState=="complete" || ifr_id.document.readyState=="complete"){//后面一个条件为了opera
ifr_window.document.body.innerHTML="聊天室,和自己聊天!<br />______________________________________<br />";
alert(ifr_id.document.body.innerHTML);//注意,不是ifr_id.window.document
}
}
var o;
for(o in ifr_id){
document.write(o," = ",eval("ifr_id."+o),"<br />");
}
</script>
[/html] |
|
