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 <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> public "-//w3c//dtd x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> 1.0 transitional//en" "http://www.w3.org/tr/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1/dtd/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1-transitional.dtd"><<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>ns="http://www.w3.org/1999/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>" ><head> <title>untitled page</title><style type="text/<a href="/list/css/index.html" title="css" target="_blank"><acronym>css</acronym></a>"></style></head><body><iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe></body></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>><script language="<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>" type="text/<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>">var aa_value="i'm a vari<a href="/list/ant/index.html" title="ant" target="_blank"><acronym>ant</acronym></a> 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 vari<a href="/list/ant/index.html" title="ant" target="_blank"><acronym>ant</acronym></a> 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.inner<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>);function aa(msg){ alert("i'm alerting from top window ,and i received a msg:\n" + msg);}</script>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

bb.htm

运行代码框
<!doctype <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> public "-//w3c//dtd x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> 1.0 transitional//en" "http://www.w3.org/tr/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1/dtd/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1-transitional.dtd"><<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>ns="http://www.w3.org/1999/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>" ><head> <title>sub frame</title><style type="text/<a href="/list/css/index.html" title="css" target="_blank"><acronym>css</acronym></a>"></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></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>><script language="<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>" type="text/<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>">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 与scrollingalert("alert from iframe : i will change my border and scrolling :");top.ifr_id.border=0;top.ifr_id.scrolling="no";</script>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

ICP备案编号:粤ICP备06052964号

www.sosof.com

选择显示字体大小

iframe 的用法与注意事项

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准网站致力的规范

www.sosof.com

选择显示字体大小

iframe 的用法与注意事项

shouchang();

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准 网站致力的规范

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

标准网站致力的规范