關於IFRAME的一些小應用

時間 2021-08-13

標籤 javascript html java 瀏覽器 ide 函數 url 設計 htm 對象欄目 HTML 简体版

原文原文鏈接

Frame能夠在網頁內嵌入另外一個頁面，相似「畫中畫」形式。

標記的使用格式是:
　　<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
　　src：文件的路徑，既但是HTML文件，也能夠是文本、ASP等；
　　width、height："畫中畫"區域的寬與高；
　　scrolling：當SRC的指定的HTML文件在指定的區域不顯不完時，滾動選項，若是設置爲NO，則不出現滾動條；如爲Auto：則自動出現滾動條；如爲Yes，則顯示；
　　FrameBorder：區域邊框的寬度，爲了讓「畫中畫「與鄰近的內容相融合，常設置爲0。
　　好比:
　　<Iframe src=" [url]http://www.IFrame.com/xyz[/url]" width="250" height="200" scrolling="no" frameborder="0"></iframe> ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 　　窗口與浮動幀之間的相互控制　　在腳本語言與對象層次中，包含Iframe的窗口咱們稱之爲父窗體，而浮動幀則稱爲子窗體，弄清這二者的關係很重要，由於要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能經過程序來訪問並控制窗體。　　一、在父窗體中訪問並控制子窗體中的對象　在父窗體中，Iframe即子窗體是document對象的一個子對象，能夠直接在腳本中訪問子窗體中的對象。　如今就有一個問題，即，咱們怎樣來控制這個Iframe，這裏須要講一下Iframe對象。當咱們給這個標記設置了ID 屬性後，就可經過文檔對象模型DOM對Iframe所含的HTML進行一系列控制。　好比在example.htm裏嵌入test.htm文件，並控制test.htm裏一些標記對象：　　<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號爲myH1的H1標記裏的文字爲hello,my dear，則可用: 　　document.myH1.innerText="hello,my dear"(其中，document可省) 　　在example.htm文件中，Iframe標記對象所指的子窗體與通常的DHTML對象模型一致，對對象訪問控制方式同樣，就再也不贅述。　　二、在子窗體中訪問並控制父窗體中對象　　在子窗體中咱們能夠經過其parent即父（雙親）對象來訪問父窗口中的對象。　　如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中訪問ID號爲myH2中的標題文字並將之改成"hello,my friend"，咱們就能夠這樣寫：　　parent.myH2.innerText="hello,my friend" 　　這裏parent對象就表明當前窗體(example.htm所在窗體)，要在子窗體中訪問父窗體中的對象，無一例外都經過parent對象來進行。　　Iframe雖然內嵌在另外一個HTML文件中，但它保持相對的獨立，是一個「獨立王國「喲，在單一HTML中的特性一樣適用於浮動幀中。　　試想一下，經過Iframe標記，咱們可將那些不變的內容以Iframe來表示，這樣，沒必要重複寫相同的內容，這有點象程序設計中的過程或函數，減省了多少繁瑣的手工勞動！另外，相當重要的是，它使頁面的修改更爲可行，由於，沒必要由於版式的調整而修改每一個頁面，你只需修改一個父窗體的版式便可了。　　要注意的是，Nestscape6.0以前版本不支持Iframe標記。　　例子： 1<iframe src="頁面" width="寬度" height="高度" align="排列能夠是left或right,center" scrolling="是否有滾動條能夠填no或yes"></iframe> <IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300></IFRAME> 2用了iframe後發現滾動條不漂亮想用2個圖片來代替↑↓ 應該怎麼實現呢？回答：用下列代碼替換網頁的<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="按下鼠標速度會更快！"></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="按下鼠標速度會更快！"></TD> </TR> </TABLE> ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 下面這段代碼能夠實現IFrame自適應高度，即隨着頁面的長度，自動適應以避免除頁面和IFrame同時出現滾動條。源代碼以下 <script type="text/javascript"> //** iframe自動適應頁面 **// //輸入你但願根據頁面高度自動調整高度的iframe的名稱的列表 //用逗號把每一個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，能夠只有一個窗體，則不用逗號。 //定義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) { //自動調整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; } } //根據設定的參數來處理不支持iframe的瀏覽器的顯示問題 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>