Iframe 詳解
2007-01-08 11:19
frame與Iframe的各項屬性
frame例子：
<frameset cols="50%,*">
<noframes>
<body>
Sorry,your explorer doesn't support the frame...
</body>
</noframes>
<frame name="left" src="left.html">
<frameset rows="*,30%">
<frame name="right_top" src="right.html">
<frame name="right_bottom" src="right2.html">
</frameset>
</frameset>
Iframe標記，又叫浮動幀標記，你可以用它將一個HTML文件嵌入在另一個HTML中顯示。它不同於Frame標記最大的特徵即這個標記所引用的HTML文件不是與另外的HTML文件相互獨立顯示，而是可以直接嵌入在一個HTML文件中，與這個HTML文件內容相互融合，成爲一個整體，另外，還可以多次在一個頁面內顯示同一內容，而不必重複寫內容，甚至可以在同一HTML文件嵌入多個HTML文件。
在腳本語言與對象層次中，包含Iframe的窗口我們稱之爲父窗體，而浮動幀則稱爲子窗體，弄清這兩者的關係很重要，因爲要在父窗體中訪問子窗體或子窗體中訪問父窗體都必須清楚對象層次，才能通過程序來訪問並控制窗體。
下面是浮動幀標記Iframe的各項屬性：
一、基本語法：
<iframe>……</iframe>
浮動幀標記Iframe必須成對出現，即有開始標記<iframe>，就必須有結束標記</iframe>。
二、浮動幀標記Iframe的屬性：
1、文件位置：
語法：src=url
說明：url爲嵌入的HTML文件的位置，可以是相對地址，也可以是絕對地址。
示例：<iframe src="iframe.html">
2、對象名稱：
語法：name=#
說明：#爲對象的名稱。該屬性給對象取名，以便其他對象利用。
示例：<iframe src="iframe.html" name="iframe1">
3、ID選擇符：
語法：id=#
說明：指定該標記的唯一ID選擇符。
示例：<iframe src="iframe.html" id="iframe1">
4、容器屬性：
語法：height=# width=#
說明：該屬性指定浮動幀的高度和寬度。取值爲正整數（單位爲像素）或百分數。
height：指定浮動幀的高度；
width：指定浮動幀的寬度。
示例：<iframe src="iframe.html" height=400 width=400>
5、尺寸調整：
語法：noresize
說明：IE專有屬性，指定浮動幀不可調整尺寸。
示例：<iframe src="iframe.html" noresize>
6、邊框顯示：
語法：frameborder=0、1
說明：該屬性規定是否顯示浮動幀邊框。
0：不顯示浮動幀邊框；
1：顯示浮動幀邊框。
示例：<iframe src="iframe.html" frameborder=0>
<iframe src="iframe.html" frameborder=1>
7、邊框厚度：
語法：border=#
說明：該屬性指定浮動幀邊框的厚度，取值爲正整數和0，單位爲像素。爲了將浮動幀與頁面無縫結合，border一般等於0。
示例：<iframe src="iframe.html" border=1>
8、邊框顏色：
語法：bordercolor=color
說明：該屬性指定浮動幀邊框的顏色。color可以是RGB色（RRGGBB），也可以是顏色名。
示例：<iframe src="iframe.html" bordercolor=red>
9、對齊方式：
語法：align=left、right、center
說明：該屬性指定浮動幀與其他對象的對齊方式。
left：居左；
right：居右；
center：居中。
示例：<iframe src="iframe.html" align=left>
<iframe src="iframe.html" align=right>
<iframe src="iframe.html" align=center>
10、相鄰間距：
語法：framespacing=#
說明：該屬性指定相鄰浮動幀之間的間距。取值爲正整數和0，單位爲像素。
示例：<iframe src="iframe.html" framespacing=10>
11、內補白屬性：
語法：hspace=# vspace=#
說明：該屬性指定浮動幀內的邊界大小。取值爲正整數和0，單位爲像素。兩個屬性應同時應用。
hspace：浮動幀內的左右邊界大小；
vspace：浮動幀內的上下邊界大小。
示例：<iframe src="iframe.html" hspace=1 vspace=1>
12、外補白屬性：
語法：marginheight=# marginwidth=#
說明：該屬性指定浮動幀的邊界大小。取值爲正整數和0，單位爲像素。兩個屬性應同時應用。
marginheight：浮動幀的左右邊界大小；
marginwidth：浮動幀的上下邊界大小。
示例：<iframe src="iframe.html" marginheight=1 marginwidth=1>
附.
iframe自適應高度和寬度
高度
<iframe name="myframe1" src="myframe1.htm" frameborder="0" scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>
寬度
<iframe name="myframe2" src="myframe2.htm" frameborder="0" scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.width=myframe.document.body.scrollWidth" ></iframe>
iframe的鏈接目標
"myframe1.htm"內容
<a href="http://www.163.com" target=_parent>www.163.com</a>
"myframe2.htm"內容
<a href="http://www.163.com" target=myframe1>www.163.com</a>
在子窗口關閉時如何reload父窗口中的iframe
現有一頁面main.htm,在其中的一個div中有一iframe(src="listdateServ"),當點擊 faq-it.org/debian/main.htm一個button時彈出一窗口chi.htm,填完chi.htm中的form再點擊一submit,轉
到savedateServ去處理，處理完後轉到一頁面saveOK.htm。現在我要在saveOK.htm關閉時reload iframe,如何做？
---------------------------------------------------------------
在saveOK.htm中(它和chi.htm是同一頁)不然就opener.opener...
<body οnbefοreunlοad="opener.document.frames['iframeName'].location.reload();return true">
用子窗口控制父窗口
不多說，直接看代碼：
父窗口：1.htm
<html>
<script language=javascript>
//插入錶行
function insertRow1(){
var tr1=f.insertRow();
var td1=tr1.insertCell();
var td2=tr1.insertCell();
td1.innerText="1";
td2.innerText="2";
}
</script>
<table id="f" border=1>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<input type="button" οnclick="window.open('2.html')">
</html>
子窗口：2.htm
<html>
<script language="javascript">
function d(){
alert("ss");
alert(opener);
}
</script>
<input type="button" οnclick="javascript:opener.insertRow1()">
</html>
如何在一個頁面中的兩個iframe中互相傳值?
---------iframe A-----------
parent.window.frames["bFrameName"].xxx();
------------iframe B---------------
function xxx()
{
alert("date")
}
另,所有的在同一目錄下面：
第一個頁面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript"></script>
</HEAD>
<BODY>
<table border="1" align="left" width="60%">
<tr>
<td><iframe name="fa" src="a.html"></iframe></td>
<td><iframe name="fb" src="b.html"></iframe></td>
<tr>
</table>
</BODY>
</HTML>
/************a.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> aaaaaaaaa </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript">
function control()
{
parent.frames['fb'].document.getElementById("button").style.display = 'block';
}
</script>
</HEAD>
/************b.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> bbbbbbbbbbb </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript"></script>
</HEAD>
<BODY>
<INPUT TYPE="button" NAME="" style="display:none;" id="button" value="I'm here here!~~~~~~~~">
</BODY>
</HTML>
<BODY>
<input type="button" value="Display" style="cursor:hand;" οnclick="control();return true;">
</BODY>
</HTML>
子窗口調用父窗口的javascript函數或其他
採用 使用iframe 方式
<!-- parent.html -->
<script language=javascript>
function funalert()
{
alert('OK');
}
</script>
<iframe name="myframe1" src="1.html" frameborder="0" border=0 scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>
<!-- 1.html -->
<a href="http://www.163.com" target=_parent>www.163.com</a>
<input type=button οnclick="parent.funalert();self.close()" name=ddd value="OK">
如果沒有使用iframe 方式,
<!-- parent.html -->
<a href=1.html target=_blank>Test</a>
<!-- 1.html -->
<input type=button οnclick="opener.funalert();self.close()" name=ddd value="OK">
問：
嵌入的iframe窗口如何改變父窗口中相應的iframe窗口的寬度和高度？
______________________________________________________________________________________________
答1：
if(top.location != self.location)
{
var a = window.parent.document.getElementsByName(self.name);
a[0].height = document.body.scrollHeight;
a[0].width = document.body.scrollWidth;
}
______________________________________________________________________________________________
答2：
top.Myiframe.style.width=
______________________________________________________________________________________________
答3：
meizz(梅花雨) 理解錯誤拉
top.Myiframe.style.width對於iframe是沒有這個屬性的；
好容易找到了
Msgbox parent.RightFrame.self.frameElement.clientHeight
parent.RightFrame.self.frameElement.clientHeight=600——這句出錯，原來還是個只讀書性
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/whoami1731/archive/2008/01/02/2010344.aspx