分享
 
 
 

网页制作总结:iframe用法与注意事项

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。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

代码: 以下是引用片段:

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

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

<!--

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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有