打印

[教程]iframe 的用法与注意事项

xling [楼主]

艾克司令

版主

帖子: 2861
体力: 5100
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

1^# 大中小发表于 2006-4-22 08:46

好多同志对 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

<!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">

</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>

提示：您可以先修改部分代码再运行

bb.htm

<!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">

</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>

提示：您可以先修改部分代码再运行

本帖最近评分记录

经典论坛大妈威望 +2 历史打分 2006-4-22 08:46

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

xling [楼主]

艾克司令

版主

帖子: 2861
体力: 5100
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

2^# 大中小发表于 2006-4-22 09:52

是否可以申请置顶几天?

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

yjxf8285

初级会员

帖子: 82
体力: 51
威望: 0
当前: 北京西城区
离线: 35 天

3^# 大中小发表于 2006-4-22 10:12

谢谢！！值得研究一下~~

实现理想

TOP

请大家尊重和保护奥运知识产权。

bluebox

中级会员

帖子: 293
体力: 479
威望: 0
离线: 612 天

4^# 大中小发表于 2006-4-22 12:37

正是偶需要的文章得好好看看

七度空间网页教学网
http://www.7dspace.com/

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

IamUE

银牌会员

帖子: 604
体力: 1698
威望: 0
当前: 北京昌平区
离线: 254 天

5^# 大中小发表于 2006-4-22 13:01

这样啊,郁闷了很久没解决的疑问,十分感谢!

1997年过去了我很怀念它

TOP

xling [楼主]

艾克司令

版主

帖子: 2861
体力: 5100
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

6^# 大中小发表于 2006-4-22 14:53

欢迎提出问题.
我会尽我所能.

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

bluebox

中级会员

帖子: 293
体力: 479
威望: 0
离线: 612 天

7^# 大中小发表于 2006-4-22 20:15

楼主能不能提供类似 document.body.scrollHeight这样属性的列表啊

七度空间网页教学网
http://www.7dspace.com/

TOP

xling [楼主]

艾克司令

版主

帖子: 2861
体力: 5100
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

8^# 大中小发表于 2006-4-23 08:04

如果你裝了OFFICE（我这里装的是OFFICE2003）:你可以去找:
C:\Program Files\Microsoft Office\OFFICE11\1028\HTMLREF.CHM
它就是大全,不过,小心使用,因为它里面有相当一部分是IE ONLY

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

kkyhm

巧慧孤星

银牌会员

帖子: 392
体力: 1087
威望: 0
当前: 四川成都
离线: 124 天

9^# 大中小发表于 2006-4-23 08:54

好同志就是应该多交流，多学习。
很不错哈。

中国霹雳网

TOP

yr

高级会员

帖子: 454
体力: 572
威望: 1
当前: 广东深圳
离线: 3 天

10^# 大中小发表于 2006-4-23 10:13

受用，谢谢

TOP

shqianlei

新手上路

帖子: 114
体力: 48
威望: 0
当前: 上海闸北
离线: 48 天

11^# 大中小发表于 2006-4-23 22:30

谢谢LZ了，刚好用到这个

推荐一个酷站收藏大全
--------------------------------------------
cool.aisu.cn

TOP

bluebox

中级会员

帖子: 293
体力: 479
威望: 0
离线: 612 天

12^# 大中小发表于 2006-4-24 13:46

OFFICE是必备软件啊我这就去找找看谢谢哈

七度空间网页教学网
http://www.7dspace.com/

TOP

bluebox

中级会员

帖子: 293
体力: 479
威望: 0
离线: 612 天

13^# 大中小发表于 2006-4-24 13:48

晕偶装的2003 里面只有1033 2052这两,没有你说的那个

七度空间网页教学网
http://www.7dspace.com/

TOP

KinK

中级会员

帖子: 113
体力: 238
威望: 0
离线: 166 天

14^# 大中小发表于 2006-4-26 22:24

bluebox在上个帖子中说

引用:

楼主能不能提供类似 document.body.scrollHeight这样属性的列表啊

复制内容到剪贴板

代码:

<!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>

TOP

bjhaoyun

中级会员

帖子: 124
体力: 480
威望: 10
离线: 137 天

15^# 大中小发表于 2006-4-27 00:34

给个建议，在aa最后用脚本加载bb，在bb最后调用aa中得函数，这样肯定能行。

天下之大，无棋不有

TOP

gjr1

图腾

高级会员

帖子: 369
体力: 868
威望: 6
离线: 16 天

16^# 大中小发表于 2006-4-27 16:14

xling在上个帖子中说

引用:

如果你裝了OFFICE（我这里装的是OFFICE2003）:你可以去找:
C:\Program Files\Microsoft Office\OFFICE11\1028\HTMLREF.CHM
它就是大全,不过,小心使用,因为它里面有相当一部分是IE ONLY

我也是2003，怎么找不到1028这个文件夹？

http://www.traindiy.com

TOP

gjr1

图腾

高级会员

帖子: 369
体力: 868
威望: 6
离线: 16 天

17^# 大中小发表于 2006-4-27 16:19

找到了，在2052这个夹下，但是是英文版的，郁闷啊

http://www.traindiy.com

TOP

gjr1

图腾

高级会员

帖子: 369
体力: 868
威望: 6
离线: 16 天

18^# 大中小发表于 2006-4-27 23:08

请教一个菜问题：

iframe和框架frameset有什么区别？
我不是指二者的属性和写法有什么区别，是不明白这两个在使用上各有什么优缺点？为什么似乎iframe更受欢迎？等等。
谢谢！

http://www.traindiy.com

TOP

xling [楼主]

艾克司令

版主

帖子: 2861
体力: 5100
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

19^# 大中小发表于 2006-5-9 19:40

补充说明:
ifr_id在IE和Opera下,是有一个document的,即ifr_id.document,但是注意不是ifr_id.window.document,fireFox下没有这个属性的.

如下所示:

<!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>

提示：您可以先修改部分代码再运行

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

HBrO

超级版主

帖子: 6126
体力: 15419
威望: 224
当前: 广东广州
离线: 1 天

20^# 大中小发表于 2006-8-27 00:46

远在天边,近在眼前,一直都没发现,原来经典论坛里就有这么好的关于iframe的文章,我当初还百度了.

我的Blog:
http://www.asv5.cn/blog/

TOP

wjeasy

银牌会员

帖子: 1282
体力: 1036
威望: 3
当前: 山东济南
离线: 1 天

21^# 大中小发表于 2006-8-28 03:39

这个东西不错

TOP