iframe 的用法與注意事項_經驗交流

本文主要來講述一下 iframe 的用法與注意事項:
    好多同志對 iframe 是如何控制的,並不是十分了解,基本上還處於一個模糊的認識狀態.
注意兩個事項, ifr 是一個以存在的 iframe 的 ID 和 NAME 值:
    document.getElementById(“ifr”);
    window.frames[“ifr”];
    window.frames[“ifr”];的函數,變數就必須通過第二種方法.因為它取的是一個完整的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

<title>Untitled Page</title> <style type="text/css"> <!-- body{ margin:0px; } --> </style> <iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe> <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 全選注:如需引入外部Js需刷新才能執行]

bb.htm

子框架標題> <!-- html,正文{ 邊距：0px； 寬度：90%； } --> 風格> 頭> 我是副架！ …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… …… 正文> <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 全選注:如需引入外部Js需刷新才能執行]