jsp 內(nèi)嵌網(wǎng)頁(yè)內(nèi)容--iframe

2019-11-18 16:37:00

字體：大中小

供稿：網(wǎng)友

ZZzzz~ may wind

<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
　src：文件的路徑，既可是HTML文件，也可以是文本、asp等；
　width、height："畫(huà)中畫(huà)"區(qū)域的寬與高；
　scrolling:當(dāng)SRC的指定的HTML文件在指定的區(qū)域不顯不完時(shí)，滾動(dòng)選項(xiàng)，如果設(shè)置為NO，則不出現(xiàn)滾動(dòng)條；如為Auto：則自動(dòng)出現(xiàn)滾動(dòng)條；如為Yes，則顯示;
frameborder：區(qū)域邊框的寬度，為了讓“畫(huà)中畫(huà)“與鄰近的內(nèi)容相融合，常設(shè)置為0。

　　比如:

<Iframe src="

　　窗口與浮動(dòng)幀之間的相互控制
　　在腳本語(yǔ)言與對(duì)象層次中，包含Iframe的窗口我們稱(chēng)之為父窗體，而浮動(dòng)幀則稱(chēng)為子窗體，弄清這兩者的關(guān)系很重要，因?yàn)橐诟复绑w中訪問(wèn)子窗體或相反都必須清楚對(duì)象層次，才能通過(guò)程序來(lái)訪問(wèn)并控制窗體。

　　1、在父窗體中訪問(wèn)并控制子窗體中的對(duì)象
　　在父窗體中，Iframe即子窗體是document對(duì)象的一個(gè)子對(duì)象，可以直接在腳本中訪問(wèn)子窗體中的對(duì)象。
　　現(xiàn)在就有一個(gè)問(wèn)題，即，我們?cè)鯓觼?lái)控制這個(gè)Iframe，這里需要講一下Iframe對(duì)象。當(dāng)我們給這個(gè)標(biāo)記設(shè)置了ID 屬性后，就可通過(guò)文檔對(duì)象模型DOM對(duì)Iframe所含的HTML進(jìn)行一系列控制。

　　比如在example.htm里嵌入test.htm文件，并控制test.htm里一些標(biāo)記對(duì)象：
　　<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代碼為:
　　<html>
　　　<body>
　　　　<h1 id="myH1">hello,my boy</h1>
　　　</body>
　　</html>
　　如我們要改變ID號(hào)為myH1的H1標(biāo)記里的文字為hello,my dear，則可用:
　　document.myH1.innerText="hello,my dear"(其中，document可省)
　　在example.htm文件中，Iframe標(biāo)記對(duì)象所指的子窗體與一般的 DHTML對(duì)象模型一致，對(duì)對(duì)象訪問(wèn)控制方式一樣，就不再贅述。

　　2、在子窗體中訪問(wèn)并控制父窗體中對(duì)象
　　在子窗體中我們可以通過(guò)其parent即父（雙親）對(duì)象來(lái)訪問(wèn)父窗口中的對(duì)象。
　　如example.htm：
　　<html>
　　　<body onclick="alert(tt.myH1.innerHTML)"> 　<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
　　　　<h1 id="myH2">hello,my wife</h1>
　　　</body>
　　</html>
　　如果要在frame1.htm中訪問(wèn)ID號(hào)為myH2中的標(biāo)題文字并將之改為"hello,my friend"，我們就可以這樣寫(xiě)：
　　parent.myH2.innerText="hello,my friend"
　　這里parent對(duì)象就代表當(dāng)前窗體(example.htm所在窗體)，要在子窗體中訪問(wèn)父窗體中的對(duì)象，無(wú)一例外都通過(guò)parent對(duì)象來(lái)進(jìn)行。

　　Iframe雖然內(nèi)嵌在另一個(gè)HTML文件中，但它保持相對(duì)的獨(dú)立，是一個(gè)“獨(dú)立王國(guó)“喲，在單一HTML中的特性同樣適用于浮動(dòng)幀中。

　　試想一下，通過(guò)Iframe標(biāo)記，我們可將那些不變的內(nèi)容以Iframe來(lái)表示，這樣，不必重復(fù)寫(xiě)相同的內(nèi)容，這有點(diǎn)象程序設(shè)計(jì)中的過(guò)程或函數(shù)，減省了多少繁瑣的手工勞動(dòng)！另外，至關(guān)重要的是，它使頁(yè)面的修改更為可行，因?yàn)椋槐匾驗(yàn)榘媸降恼{(diào)整而修改每個(gè)頁(yè)面，你只需修改一個(gè)父窗體的版式即可了。
　　要注意的是，Nestscape6.0之前版本不支持Iframe標(biāo)記。

　　例子：

用了iframe后發(fā)現(xiàn)滾動(dòng)條不漂亮想用2個(gè)圖片來(lái)代替↑↓
應(yīng)該怎么實(shí)現(xiàn)呢？

回答：
用下列代碼替換網(wǎng)頁(yè)的<title>..</title>
<SCRipT LANGUAGE="javascript">
function scroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width:
1px,1px,1px,1px;">
文字<BR> 文字<BR>
文字<BR>
文字<BR>
文字
<BR>
<BR>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouSEOver="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll (-3)" BORDER="0" ALT="按下鼠標(biāo)速度會(huì)更快！"></TD>
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH ="15" HEIGHT="21" ALT="按下鼠標(biāo)速度會(huì)更快！"></TD>
</TR>
</TABLE>

下面這段代碼可以實(shí)現(xiàn)IFrame自適應(yīng)高度，即隨著頁(yè)面的長(zhǎng)度，自動(dòng)適應(yīng)以免除頁(yè)面和IFrame同時(shí)出現(xiàn)滾動(dòng)條。
源代碼如下

//輸入你希望根據(jù)頁(yè)面高度自動(dòng)調(diào)整高度的iframe的名稱(chēng)的列表
//用逗號(hào)把每個(gè)iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個(gè)窗體，則不用逗號(hào)。

//定義iframe的ID
var iframeids=["test"]

//如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏
var iframehide="yes"

function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自動(dòng)調(diào)整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.Opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用戶的瀏覽器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用戶的瀏覽器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根據(jù)設(shè)定的參數(shù)來(lái)處理不支持iframe的瀏覽器的顯示問(wèn)題
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>

其他有參考價(jià)值的網(wǎng)址:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //iframe嵌入網(wǎng)頁(yè)的用法
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //IFRAME對(duì)象
http://www.hoyo.idv.tw/web-PRogram/html/iframe.htm //內(nèi)嵌框架iframe

上一篇：jdk6.0 + Tomcat6.0的簡(jiǎn)單jsp,Servlet,javabean的調(diào)試

下一篇：用jsp實(shí)現(xiàn)SQLServe數(shù)據(jù)庫(kù)的備份和恢復(fù)