DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁制作總結:iframe用法與注意事項
網頁制作總結:iframe用法與注意事項
編輯:CSS詳解     
 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 />
  &nbsp; ...<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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved