iframe元素的功能是在一個(gè)文檔里內(nèi)嵌一個(gè)文檔，創(chuàng)建一個(gè)浮動的幀。iframe是如何控制的很多人并不是十分了解，基本上還處于一個(gè)模糊的認(rèn)識狀態(tài)。
iframe的兩個(gè)注意事項(xiàng),ifr是一個(gè)以存在的iframe的ID和NAME值：
以下是引用片段：
document.getElementById(“ifr”);
window.frames[“ifr”];
要想使用iframe內(nèi)的函數(shù),變量就必須通過**種方法.因?yàn)樗〉氖且粋€(gè)完整的DOM模型(不知道這樣說對不對).前幾種方法只是取出了一個(gè)OBJECT而已.
如果只想改變iframe的 src 或者 border , scrolling 等 attributes(與property不是一個(gè)概念,property是不能寫在標(biāo)簽內(nèi)的,比如:scrollHeight,innerHTML等),就需要用到前幾種方法.
如果想取得iframe的頁面(不是iframe本身),就需要使用**種方法,因?yàn)樗〉玫氖且粋€(gè)完整的DOM模型,比如想得到iframe的document.body的內(nèi)容,就只能用**種方法.
還要注意的是,如果在iframe的頁面未完全裝入的時(shí)候,調(diào)用iframe的DOM模型,會發(fā)生很嚴(yán)重的錯(cuò)誤,所以,你要準(zhǔn)備一個(gè)容錯(cuò)模式.
下面是示例,一個(gè)是aa.htm,一個(gè)是bb.htm!
aa.htm
代碼:
以下是引用片段：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" >
< html xmlns="" >
< head >
< title >Untitled Page< /title >
< style type="text/css" >
< !--
body{
margin:0px;
}
-- >
< /style >
< /head >
< body >
< iframe name="ifr" 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可能還未裝載完成,所以,下冇的可能引發(fā)錯(cuò)誤
//調(diào)用iframe內(nèi)的函數(shù) ifr_window.bb();
//調(diào)用iframe內(nèi)的變量
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:
" + msg);
}
< /script >
bb.htm
代碼:
以下是引用片段：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" >
< html xmlns="" >
< head >
< title >sub frame< /title >
< style type="text/css" >
< !--
html,body{
margin:0px;
width:90%;
}
-- >
< /style >
< /head >
< body >
I’m a sub frame!
...< 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);
//調(diào)用父窗體的函數(shù):
parent.aa("I will calling a function which is Top window’s ");
//改變父窗體的標(biāo)題:
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 >
網(wǎng)頁制作總結(jié):iframe用法與注意事項(xiàng)，希望能與大家多多交流，謝謝！
