网页制作技巧之iframe 的用法与注意事项_网站运营_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

网页制作技巧之iframe 的用法与注意事项

作者：闵涛文章来源：闵涛的学习笔记点击数：2094 更新时间：2008/11/8 12:22:29

好多同志对 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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[C语言系列]C# Regex用法详解  [MySql]MySQL DELETE语法用法详解
[C语言系列]Messagebox.Show()常用参数用法实例详解  [搜索优化]SEOER分享qq空间做百度收录排名的技巧
[网页制作]background-position 用法详细介绍  [网页制作]网页制作软件有哪些
[网页制作]很有意义的网页制作之meta标签中的name、http-equ…  [Web开发]is_file()和is_dir()用于遍历目录时用法注意事项
[Web开发]file_get_contents()的用法— 将整个文件读入一个…  [文书写作]留学申请文书写作技巧和范例

教程录入：mintao 责任编辑：mintao

上一篇教程：用IFRAME实现网页的内嵌和预载

下一篇教程：网页制作技巧之Iframe代码详解

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……