iframe用法總結

時間  2019-12-17
標籤 iframe 用法 總結 欄目 HTML 简体版
原文   原文鏈接
  1. <p><iframe>是框架的一種形式，也比較經常使用到。 </p><div class="blogstory"><p><span style="font-size:18px;"><span style="color:#0000ff;"><span style="font-size:16px;">一：幾個例子——演示iframe的基本用法</span></span></span></p></div>  
Html代碼  複製代碼  收藏代碼
  1. 例1：   
  2. <iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>  
  3. iframe的各個屬性含義以下：   
  4. width插入頁的寬；height插入頁的高；scrolling 是否顯示頁面滾動條（可選的參數爲 auto、yes、no，若是省略這個參數，則默認爲auto）；frameborder  邊框大小；   
  5. 注意：URL建議用絕對路徑；傳說中百DU用：<iframe width=0 height=0 frameborder=0 scrolling=auto src="WWW" mce_src="WWW" .webjx.com></iframe><br />   
  6. 例2：   
  7. 若是一個頁面裏面有框架。。隨便點頁面裏的鏈接，要求在這個<iframe> 裏打開。在iframe 中加入name=** （**本身設定）.   
  8. <iframe name=**  ></iframe>  
  9. 而後在修改默認打開模式，：網頁HEAD中加上<a href="URL" mce_href="URL" target=**>或部分鏈接的目標框架設爲（**）.   
  10. 例3:   
  11. 要插入一個頁面。要求只拿中間一部分。其餘的都不要，代碼以下：   
  12. <iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="<a href=" mce_src="<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/"><span style="color: #0000ff;" mce_style="color: #0000ff;"><span style="text-decoration: underline;" mce_style="text-decoration: underline;">http://www.webjx.com/</span></span></a>"  frameborder=no scrolling=no  width=776  height=2500></iframe>  
  13. 控制插入頁被框架覆蓋的深度 marginwidth=0 marginheight=0；控制框架覆蓋上部分的深度 vspace=-170    
  14. scrolling滾動條要否（auto、yes、no）   frameborder框架的邊框大小，width=776  height=2500此框架的大小。   
  15. 例4:   
  16.     一、頁面內加入iframe   
  17. <iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>，   
  18. scrolling表示是否顯示頁面滾動條，可選的參數爲auto、yes、no，若是省略這個參數，則默認爲auto。   
  19. 　　二、超連接指向這個嵌入的網頁，只要給這個iframe命名就能夠了。方法是<iframe name=**>，例如我命名爲aa，寫入這句HTML語言<iframe width=420 height=330 name=aa frameborder=0 src="http://www.cctv.com" mce_src="http://www.cctv.com"></iframe>，而後，網頁上的超連接語句應該寫爲：<a  href="URL" mce_href="URL" target=aa>  
  20. 　　三、若是把frameborder設爲1，效果就像文本框同樣   
  21. 　　透明的IFRAME的用法   
  22. 　　必需IE5.5以上版本才支持   
  23. 　　在transparentBody.htm文件的<body>標籤中，我已經加入了style="background- color=transparent" 經過如下四種IFRAME的寫法我想大概你對iframe背景透明效果的實現方法應該會有個清晰的瞭解：   
  24. <IFRAME ID="Frame1" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true"></IFRAME>  
  25. <IFRAME ID="Frame2" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>  
  26. <IFRAME ID="Frame3" SRC="transparentBody.htm" mce_SRC="transparentBody.htm"></IFRAME>  
  27. <IFRAME ID="Frame4" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>
二：（難點）設置iframe框架的背景色
Java代碼  複製代碼  收藏代碼
  1. a.htm     
  2.   <mce:script type="text/javascript"><!--   
  3.      
  4.   function   setBG(){     
  5.   var   strColor=document.bgColor;     
  6.   frm.document.bgColor=strColor;     
  7.   }     
  8.      
  9. // --></mce:script>     
  10.   <body   style="background-color:red" mce_style="background-color:red"   onload='setBG()'>     
  11.   <iframe   src="about:blank" mce_src="about:blank"   name=frm></iframe>

三：（難點）窗口與浮動幀之間的相互控制javascript

Html代碼  複製代碼  收藏代碼
  1. 在腳本語言與對象層次中，包含Iframe的窗口咱們稱之爲父窗體，而浮動幀則稱爲子窗體，弄清這二者的關係很重要，由於要在父窗體中訪問子窗體或相反都必須清楚對象層次，才能經過程序來訪問並控制窗體。   
  2. 　　    一、在父窗體中訪問並控制子窗體中的對象   
  3. 　　在父窗體中，Iframe即子窗體是document對象的一個子對象，能夠直接在腳本中訪問子窗體中的對象。   
  4. 　　如今就有一個問題，即，咱們怎樣來控制這個Iframe，這裏須要講一下Iframe對象。當咱們給這個標記設置了ID 屬性後，就可經過文檔對象模型DOM對Iframe所含的HTML進行一系列控制。   
  5. 　　好比在example.htm裏嵌入test.htm文件，並控制test.htm裏一些標記對象：   
  6. 　　<Iframe src="test.htm" mce_src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>  
  7.     test.htm文件代碼爲:   
  8. 　　<html>  
  9. 　　　<body>  
  10. 　　　　<h1 id="myH1">hello,my boy</h1>  
  11. 　　　</body>  
  12. 　　</html>  
  13. 　　如咱們要改變ID號爲myH1的H1標記裏的文字爲hello,my dear，則可用:   
  14. 　　document.myH1.innerText="hello,my dear"(其中，document可省)   
  15. 　　在example.htm文件中，Iframe標記對象所指的子窗體與通常的DHTML對象模型一致，對對象訪問控制方式同樣。   
  16. 　　    二、在子窗體中訪問並控制父窗體中對象   
  17. 　　在子窗體中咱們能夠經過其parent即父（雙親）對象來訪問父窗口中的對象。   
  18. 　　如example.htm：   
  19. 　　<html>  
  20. 　　　<body onclick="alert(tt.myH1.innerHTML)">  
  21. 　　　　<Iframe name="tt" src="frame1.htm" mce_src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>  
  22. 　　　　<h1 id="myH2">hello,my wife</h1>  
  23. 　　　</body>  
  24. 　　</html>  
  25. 　　若是要在frame1.htm中訪問ID號爲myH2中的標題文字並將之改成"hello,my friend"，咱們就能夠這樣寫：   
  26. 　　parent.myH2.innerText="hello,my friend"  
  27.     或者parent.document.getElementById("myH2").innerText="hello,my friend"  
  28. 　　這裏parent對象就表明當前窗體(example.htm所在窗體)，要在子窗體中訪問父窗體中的對象，無一例外都經過parent對象來進行。   
  29.            
  30.         3:frame的一個子元素訪問frame的另外一個子元素   
  31.     例如：框架文件frame.html中嵌入了另外兩個html文件   
  32.     <div styleClass="basewnd">    
  33.  <!-- 搜索 -->  
  34.  <div id="search" name="test" align="center" class="top_list_home">  
  35.   <iframe id="frameSearch" name="search" src="Search.html" mce_src="Search.html"  frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>    
  36.  </div>  
  37. <!-- 單位目錄樹 -->  
  38.  <div align="center" class="welcome_tag_home">  
  39.   <iframe src="DirectoryTree.html" mce_src="DirectoryTree.html"  frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>    
  40.  </div>  
  41.   </div>  
  42. 那麼如今要在DirectoryTree.html文件中訪問Search.html文件中的一個id爲section的<font></font>標籤的innerHTML屬性，則能夠這樣：   
  43. alert(parent.document.search.section.innerHTML),其中search是「搜索」div的id，或者：   
  44. alert(parent.document.getElementById("search").section.innerHTML),   
  45. 或者也能夠這樣：   
  46. alert(parent.document.frames["frameSublist"].name)(這是直接訪問iframe)   
  47. 可是以上這些方法都不怎麼好用，由於iframe不是標準HTML標籤，所以這些方法老是時不時地失靈，所以最好使用下面的方法：   
  48.                                         obj = parent.document.getElementById("frameSearch").contentWindow   
  49.                     objobj=obj.document.getElementById("section")   
  50.                                         obj.innerHTML="你們好！"  
  51. 這種方法屢試不爽，關於具體的介紹，見下面的第四節（用JS訪問操做iframe裏的dom徹底攻略！）   
  52. 　　Iframe雖然內嵌在另外一個HTML文件中，但它保持相對的獨立，是一個「獨立王國「喲，在單一HTML中的特性一樣適用於浮動幀中。試想一下，經過Iframe標記，咱們可將那些不變的內容以Iframe來表示，這樣，沒必要重複寫相同的內容，這有點象程序設計中的過程或函數，減省了多少繁瑣的手工勞動！另外，相當重要的是，它使頁面的修改更爲可行，由於，沒必要由於版式的調整而修改每一個頁面，你只需修改一個父窗體的版式便可了。   
  53.         4:最適用的iframe內部和外部元素的訪問方法（在各個瀏覽器中都適用，而且不會失靈，而上面介紹的那些方法中，不少用過一兩次後就失靈了）   
  54.      請見下一個文本框。　　  　　  

四：（重重之點）用JS訪問操做iframe裏的dom徹底攻略！css

Java代碼  複製代碼  收藏代碼
  1. 兩個頁面，一個頁面是iframe所在頁面(頁面名稱：iPage.html)，另外一個頁面是iframe屬性src指向頁面（頁面名稱：srcPage.html）。   
  2. iPage.html，<body>裏dom：   
  3. <iframe id=「iId「 name=「iName「 src="「srcPage.html「" mce_src="「srcPage.html「" scrolling=「no「 frameborder=「0「></iframe>   
  4. srcPage.html，<body>裏dom：   
  5. <h1>妹妹的一天</h1>    
  6. <p>早上吃早點，中午約會吃飯，下午K歌，晚上和哥哥瞎折騰</p>   
  7. 下面討論ie下JS是怎麼操做以上兩個頁面，再討論firefox的作法，最後給出兼容ie,firefox瀏覽器操做iframe對象的方法。   
  8. 1、ie下訪問操做iframe裏內容   
  9. 你們都知道iframe是非標準html標籤，它是由ie瀏覽器推出的多佈局標籤, 隨後Mozilla也支持了這個標籤。  
  10. 1. ie經過document.frames["IframeName"]獲取它，例子：咱們在iPage.html裏輸出srcPage.html裏h1的內容，JS以下，firefox下document.frames 沒有定義錯誤提示：   
  11. window.onload = (function () {    
  12.   alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);});   
  13. 2. ie另外一種方法contentWindow獲取它，代碼：    
  14. window.onload = (function () {    
  15.  var iObj = document.getElementById(‘iId‘).contentWindow;   
  16.  alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);   
  17. });   
  18. 此方法通過ie6,ie7,firefox2.0,firefox3.0測試都經過。（網上一查，發現Mozilla Firefox iframe.contentWindow.focus緩衝區溢出漏洞，有腳本注入攻擊的危險。 這個能夠在後臺防止這樣的事情發生。）   
  19. 3.改變srcPage.html裏h1標題內容，代碼：   
  20. iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想變成她一天的一部分‘;   
  21. 經過contentWindow後訪問裏面的節點就和之前同樣了。   
  22. 2、firefox下訪問操做iframe裏內容   
  23. Mozilla支持經過IFrameElmRef.contentDocument訪問iframe的document對象的W3C標準，經過標準能夠少寫一個document,代碼：   
  24. var iObj = document.getElementById(‘iId‘).contentDocument;    
  25. alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想變成她一天的一部分‘);    
  26. alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);   
  27. 兼容這兩種瀏覽器的方法，如今也出來了，就是使用contentWindow這個方法。   
  28. 3、重寫iframe裏的內容   
  29. 經過designMode（設置文檔爲可編輯設計模式）和contentEditable（設置內容爲可編輯），你能夠重寫iframe裏的內容。代碼：   
  30. var iObj = document.getElementById(‘iId‘).contentWindow;   
  31. iObj.document.designMode = ‘On‘;    
  32. iObj.document.contentEditable = true;    
  33. iObj.document.open();    
  34. iObj.document.writeln(‘<html><head>‘);    
  35. iObj.document.writeln(‘<mce:style><!--   
  36. body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}   
  37. --></mce:style><style mce_bogus="1">body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);    
  38. iObj.document.writeln(‘</head><body></body></html>‘);    
  39. iObj.document.close();   
  40. 這兩個對象的資料可參考：http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx  
  41. 4、iframe自適應高度   
  42. 有了上面的原理要實現這個至關簡單，就是把iframe的height值設置成它裏面文檔的height值就能夠。代碼：   
  43. window.onload = (function () {    
  44. var iObj = document.getElementById(‘iId‘);    
  45. iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;});   
  46. PS:   
  47. 1. Document.designMode ,Document.contentEditable在你這裏的使用場景錯了,他通常是應用在在線編輯器上的,若是你並非開放給用戶操做的話,根本不必設置這個屬性!   
  48. 2. 另外之因此要用 window.onload,是由於頁面加載中,iframe的加載順序是在最後的,也就是說,在沒用window.onload的狀況下,在執行你那段js的時候iframe裏的dom都還沒加載到,這樣天然是無輸出的了   
  49. 3. 若是是在兩個不一樣的子域下，上面的代碼須要作小的改動。   
  50. 調用iframe的頁面和被iframe的頁面須要增長設置 document.domain 的代碼，指明同一個根域便可。   
  51. 參考資料：   
  52. https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla  
  53. http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx  
  54. http://www.kuqin.com/webpagedesign/20080516/8536.html  
  55. http://www.nohack.cn/jsj/safe/2006-10-05/8156.html  
  56. 此外，用DOM方法與jquery方法結合的方式：   
  57. 1.在父窗口中操做 選中IFRAME中的全部單選鈕   
  58. $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");   
  59. 2.在IFRAME中操做 選中父窗口中的全部單選鈕   
  60. $(window.parent.document).find("input[@type='radio']").attr("checked","true");   
  61. iframe框架的：<iframe src="test.html" mce_src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>   
  62. 3.Try this:    
  63. $("#myid", top.document);    
  64. the top.document tells the selector to target the myid element which    
  65. exists in the topmost document (your parent page).  In order for this    
  66. to work, jquery must be loaded in the file which is viewed through the    
  67. iframe.    
  68. 個人代碼   
  69. $('#parentElem', top.document).append('<div class="imgbox" id="imgbox"><img class="img" src="pp.png" mce_src="pp.png" id="img"></div>');   
  70. --end--  

五：用圖片代替iframe的滾動條html

 

Java代碼  複製代碼  收藏代碼
  1. <IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" mce_src="bgm/bgm.html" width=300></IFRAME>   
  2. 用了iframe後 發現滾動條不漂亮 想用2個圖片來代替↑↓應該怎麼實現呢？   
  3. 回答：用下列代碼替換網頁的<title>..</title>   
  4. <SCRIPT LANGUAGE="javascript">   
  5. function scroll(n)   
  6. {temp=n;   
  7. Out1.scrollTop=Out1.scrollTop+temp;   
  8. if (temp==0) return;   
  9. setTimeout("scroll(temp)",80);   
  10. }   
  11. </SCRIPT>   
  12. <TABLE WIDTH="330">   
  13. <TR>   
  14. <TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >   
  15. <DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;" mce_STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">   
  16. 文字<BR> 文字<BR>   
  17. 文字<BR>   
  18. 文字<BR>   
  19. 文字   
  20. <BR>   
  21. <BR>   
  22. </DIV>   
  23. </TD>   
  24. <TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" mce_SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll(-3)" BORDER="0" ALT="按下鼠標速度會更快！"></TD>   
  25. </TR>   
  26. <TR>   
  27. <TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" mce_SRC="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)"      onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠標速度會更快！"></TD>   
  28. </TR>   
  29. </TABLE>   
  30. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::   
  31. 下面這段代碼能夠實現IFrame自適應高度，即隨着頁面的長度，自動適應以避免除頁面和IFrame同時出現滾動條。   
  32. 源代碼以下:   
  33. <mce:script type="text/javascript"><!--   
  34. //** iframe自動適應頁面 **//   
  35. //輸入你但願根據頁面高度自動調整高度的iframe的名稱的列表   
  36. //用逗號把每一個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，能夠只有一個窗體，則不用逗號。  
  37. //定義iframe的ID   
  38. var iframeids=["test"]   
  39. //若是用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏  
  40. var iframehide="yes"  
  41. function dyniframesize()   
  42. {   
  43. var dyniframe=new Array()   
  44. for (i=0; i<iframeids.length; i++)   
  45. {   
  46. if (document.getElementById)   
  47. {   
  48. //自動調整iframe高度   
  49. dyniframe[dyniframe.length] = document.getElementById(iframeids);   
  50. if (dyniframe && !window.opera)   
  51. {   
  52. dyniframe.style.display="block"  
  53. if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //若是用戶的瀏覽器是NetScape  
  54. dyniframe.height = dyniframe.contentDocument.body.offsetHeight;   
  55. else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //若是用戶的瀏覽器是IE  
  56. dyniframe.height = dyniframe.Document.body.scrollHeight;   
  57. }   
  58. }   
  59. //根據設定的參數來處理不支持iframe的瀏覽器的顯示問題   
  60. if ((document.all || document.getElementById) && iframehide=="no")   
  61. {   
  62. var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)   
  63. tempobj.style.display="block"  
  64. }   
  65. }   
  66. }   
  67. if (window.addEventListener)   
  68. window.addEventListener("load", dyniframesize, false)   
  69. else if (window.attachEvent)   
  70. window.attachEvent("onload", dyniframesize)   
  71. else  
  72. window.onload=dyniframesize   
  73. // --></mce:script> 

六：iframe屬性java

屬性 值 描述 DTD 
align left 
right 
top 
middle 
bottom 
 規定如何根據周圍的文原本排列此框架。 TF 
frameborder 1 
0 
 規定是否顯示框架的邊框。 TF 
height pixels 
% 
 定義 iframe 的高度。 TF 
longdesc URL 描述此框架內容的長描述的URL。 TF 
marginheight pixels 定義 iframe 的頂部和底部的邊距。 TF 
marginwidth pixels 定義 iframe 的左側和右側的邊距。 TF 
name frame_name 規定 iframe 的惟一名稱 （以便在腳本中使用）。 TF 
scrolling yes 
no 
auto 
 定義滾動條。 TF 
src URL 在 iframe 中顯示文檔的 URL。 TF 
width pixels 
% 
 定義 iframe 的寬度。 TFjquery

 

 

七：本人項目部分代碼參考web

 

Java代碼  複製代碼  收藏代碼
    1. 如下是本人本身在實際項目開發時利用frame寫的一段源代碼，僅供參考：   
    2. 主文件（框架）：   
    3. <html>   
    4. <head>   
    5.  <title>教育局資源管理系統</title>   
    6.  <mce:script src="resources/js/DirectoryTree/DirectoryTree.js" mce_src="resources/js/DirectoryTree/DirectoryTree.js"></mce:script>   
    7.  <mce:script src="resources/js/date.js" mce_src="resources/js/date.js"></mce:script>   
    8.  <link rel="stylesheet" type="text/css" href="resources/css/frame.css" mce_href="resources/css/frame.css">   
    9.  <link rel="stylesheet" type="text/css" href="resources/css/global.css" mce_href="resources/css/global.css">   
    10.  <mce:script language="javascript"><!--   
    11.   function setBgColor()   
    12.   {      
    13.    var bg=document.bgColor      
    14.    bottom.document.bgColor=bg      
    15.   }   
    16.     
    17. // --></mce:script>   
    18. </head>   
    19. <body bgcolor="#f9edff" onload="setBgColor()">   
    20. <div styleClass="basewnd">   
    21.  <!-- LOGO -->   
    22.  <div align="center" class="flag">   
    23.   <iframe src="resources/HTMLFolders/Logo.html" mce_src="resources/HTMLFolders/Logo.html"  frameBorder="0" scrolling="no" width="950px" height="115px" marginheight="0"></iframe>    
    24.  </div>   
    25.     
    26.  <!-- 用戶登錄 -->   
    27.  <div align="center" class="user">   
    28.   <iframe src="resources/HTMLFolders/UserLogin.html" mce_src="resources/HTMLFolders/UserLogin.html"  frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>    
    29.  </div>   
    30.     
    31.  <!-- 搜索 -->   
    32.  <div id="search" name="test" align="center" class="top_list_home">   
    33.   <iframe id="frameSearch" name="search" src="resources/HTMLFolders/Search.html" mce_src="resources/HTMLFolders/Search.html"  frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>    
    34.  </div>   
    35.     
    36.  <!-- 導航條 -->   
    37.  <div align="center" class="navigation">   
    38.   <iframe src="resources/HTMLFolders/Navigation.html" mce_src="resources/HTMLFolders/Navigation.html"  frameBorder="0" scrolling="no" width="950px" height="25px" marginheight="0" marginwidth="0"></iframe>    
    39.  </div>   
    40.     
    41.     
    42.  <!-- 最新主題列表 -->   
    43.  <div align="center" class="newest_topic">   
    44.   <iframe src="resources/HTMLFolders/Sublist.html" mce_src="resources/HTMLFolders/Sublist.html" frameBorder="0" scrolling="no" width="540px" height="427px" marginheight="0" marginwidth="0"></iframe>   
    45.  </div>   
    46.  <!-- 單位目錄樹 -->   
    47.  <div align="center" class="welcome_tag_home">   
    48.   <iframe src="resources/HTMLFolders/DirectoryTree.html" mce_src="resources/HTMLFolders/DirectoryTree.html"  frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>    
    49.  </div>   
    50.  <!-- 頁尾 -->   
    51.  <div align="center" class="rights_home">   
    52.   <iframe id="bottom" name="bottom" src="resources/HTMLFolders/Bottom.html" mce_src="resources/HTMLFolders/Bottom.html"  frameBorder="0" scrolling="no" width="950px" height="100px" marginheight="0" marginwidth="0" allowTransparency="true" style="background-color: red" mce_style="background-color: red"></iframe>    
    53.  </div>   
    54. </div>   
    55. </body>   
    56. </html>   
    57. 被引用的文件UserLogin.html：   
    58.   <link rel="stylesheet" type="text/css" href="../css/global.css" mce_href="css/global.css">   
    59.   <table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:1px;border-color:#eeeeee;" mce_style="border-style:solid;border-width:1px;border-color:#eeeeee;">   
    60.    <tr><td>   
    61.     <table border="0" align="left" width="190" cellpadding="0" cellspacing="0">   
    62.      <tr>   
    63.       <td align="left" valign="middle" width="20" height="25" class="tdfnt12px" background="../images/title_bar2.png" >   
    64.           
    65.       </td>   
    66.       <td align="left" valign="bottom" height="25" class="tdfnt12px" background="../images/title_bar2.png">   
    67.        <font style="height:18px;font-family:宋體;font-size:14px;"> <b>會員登陸</b></font>   
    68.       </td>   
    69.      </tr>   
    70.     </table>   
    71.    </td></tr>   
    72.   </table>   
    73.      
    74.   <div id="divLogin" style="visibility:visible;position:absolute;left:10px;top:30px">   
    75.    <table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:0px;border-color:#eeeeee;" mce_style="border-style:solid;border-width:0px;border-color:#eeeeee;">   
    76.     <tr>   
    77.      <td align="left" valign="bottom" height="45"><font class="normal">用戶名：</font>   
    78.      <td valign="bottom"><input type="text" name="userAreaUserName" id="userAreaUserName" class="id" maxlength="16"/></td>   
    79.     </tr>   
    80.     <tr>   
    81.      <td align="left" height="40"><font class="normal">密碼：</font>   
    82.      <td><input type="password" name="userAreaUserPwd" id="userAreaUserPwd" class="pwd" maxlength="16"/></td>   
    83.     </tr>   
    84.     <tr>   
    85.      <td align="center" colspan="2" class="tdfnt12px">   
    86.       <input type="submit" value="登陸" style="color:black;border-color:skyblue;border-style:solid;border- width:0px;vertical-align:middle;font-family:宋體;width:68px;height:24px;background:url(resources/images/ButtonBg02.png);"/>   
    87.      </td>   
    88.     </tr>   
    89.    </table>   
    90.   </div>   
    91. 如今假設「最新主題列表」文件中有一個超連接，點擊其，包含「最新主題列表」的iframe就從新加載，此時須要利用javascript來實現：   
    92. <a href="" onclick="redirect(); return false">www.baidu.com</a>   
    93. <mce:script language="javascript"><!--   
    94.     function redirect()   
    95.     {   
    96.          parent.document.frames["frameSublist"].location.href="www.baidu.com"  
    97.     }   
    98. // --></mce:script>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程