碎碎：這兩天在實踐中，用到了 iframe，之前對其不甚了解，了解之中遇到好多奇葩問題，今天記錄下這兩天遇到的相關的內容。
- 嵌入的 iframe 頁面的邊框
- 嵌入的 iframe 頁面的背景
- 嵌入的 iframe 頁面居中
- 嵌入的 iframe 頁面的滾動條
- iframe 父頁面調用子頁面
- iframe 子頁面調用父頁面
1. iframe 嵌入頁面的邊框
//HTML 元素：主要有 src: 要嵌入的頁面 <iframe id="framePage" src="iframe/inner_page.jsp"></iframe>
// 默認有邊框: 新建測試文件，命名：test_iframe01.html,內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>
//為了方便區別，對應設置了樣式 <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; //為了方便區別，設置背景樣式 } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; //為了方便區別，設置背景樣式 } </style> <body> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe id="framePage" src="inner_page.html"></iframe> </div> </body> </html>
運行顯示如下：
可以看到 iframe 嵌入頁面，類似層級摞在上面（即 iframe層 壓在原來頁面上層），且外面有白色邊框顯示，這就是 iframe 默認顯示樣式。
- 取消邊框：只需在 iframe 標簽中設置 frameborder 屬性即可
frameborder 有兩種屬性值： 1. frameborder="0"; //無邊框顯示 2. frameborder="1"; //有邊框顯示 （默認狀態，且邊框為白色）
eg: 只需將上面文件中的 iframe 標簽內容添加上 frameborder="0" 即可，此時全部代碼如下：
更改后的 test_iframe01.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; } </style> <body> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe id="framePage" src="inner_page.html" frameborder="0"></iframe> </div> </body> </html>
執行后就會看到上面的白色邊框消失，如下：
- 邊框樣式設置：
當然，若想層級顯示，但不想要默認的邊框時，我們可以自行設置邊框，只需給對應 iframe 頁面設置樣式時，添加上邊框設置
如下：給 id="framePage" 的 iframe 設置 border 屬性，添加后樣式如下： .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; border: 3px dashed #cc9797; //設置 iframe邊框樣式 } 更改后的完整代碼如下：
更改后的 test_iframe01.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; border: 3px dashed #cc9797; //更改iframe邊框樣式 } </style> <body> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe id="framePage" src="inner_page.html"></iframe> </div> </body> </html>
運行后效果如下：
2. 嵌入的 iframe 頁面的背景
- 背景透明：需在 iframe 標簽中添加 allowtransparency 屬性設置
網上說背景透明
1. 需對<iframe>標簽設置 allowtransparency 屬性： allowtransparency="true" //背景透明, 前提不能設置 iframe 的背景樣式 2. 並對 <iframe>標簽引用的 src="***.html" 文件中設置： <body style="background-color:transparent"> 或 <body bgcolor="transparent">
但我測試 iframe 標簽 設置allowtransparency=true 與 iframe 背景樣式不設置效果一樣， 都是沒有背景（即，默認父元素背景樣式）
!!綜合來說：沒找到使背景透明的方法，如果有人知道麻煩告知，謝謝~~ - 背景樣式設置：需在 iframe 樣式設置時添加背景樣式設置
如下： 需在 iframe 樣式設置時，添加背景設置，具體代碼如下：
.iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; //設置嵌入的iframe背景 border: 3px dashed #cc9797; }
整體代碼如下：
更改后的 test_iframe01.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; //更改嵌入的 iframe 背景顏色 border: 3px dashed #cc9797; } </style> <body> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe id="framePage" src="inner_page.html"></iframe> </div> </body> </html>
3. 嵌入的 iframe 頁面位置
查到資料顯示，有兩種方式：
- 使用 iframe 元素的 屬性 align 進行設置（由於兼容性，align設置法不推薦）
如下： <iframe id="framePage" align="right" allowtransparency="true" src="inner_page.html" frameborder="0"></iframe>
- 使用 float 進行樣式設置（推薦）
如下： .iframe_page #framePage{ width: 600px; height: 300px; background-color: #adb9cd; border: 3px dashed #cc9797; float: right
上述兩者效果一樣，但其常用屬性值只有： left, right， 並沒有達到我們想要的居中效果
解決辦法： 可讓 iframe 外層的 div 元素居中，並可設置 iframe 與 外層div大小完全相同，即可實現居中
如下： .iframe_page{ margin: 0 auto; width: 400px; height: 260px; background-color: #dfdfdf; } .iframe_page #framePage{ width: 400px; height: 260px; background-color: #adb9cd; border: 3px dashed #cc9797; }
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .iframe_page{ margin: 0 auto; width: 400px; height: 260px; background-color: #dfdfdf; } .iframe_page #framePage{ width: 400px; height: 260px; background-color: #adb9cd; border: 3px dashed #cc9797; } </style> <body> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe id="framePage" src="inner_page.html"></iframe> </div> </body> </html>
4. 嵌入的 iframe 頁面的滾動條
- 使用 iframe 的 scrolling 屬性（橫/縱向一起控制）
1. 顯示滾動條：scrolling="yes" 或 scrolling="auto" (超出邊框自動顯示滾動條，且可滾動) 2. 不顯示滾動條： scrolling="no" (始終不顯示滾動條，且超出部分不能滾動)
- 使用 overflow 進行樣式設置
overflow 樣式（橫/縱）選項有： 1. 顯示滾動條，內容剪切，可滾動：overflow: scroll; //等價於 overflow: auto; 2. 不顯示滾動條，內容不可見，不可滾動：overflow: hidden; 3. 不顯示滾動條，內容超出框，不可滾動：overflow: visible; 4. inherit: 繼承父元素 overflow 屬性
橫向/縱向 單項設置：overflow-x 或 overflow-y 屬性值同 overflow
總結以上樣式: 1. 滾動條顯示 且 可滾動查看內容 2. 滾動條不顯示 且 不可滾動查看內容
這不是我們想要的 滾動條不顯示 但 可滾動查看內容，即可以自定義滾動條樣式
查詢資料顯示可設置
1. 父頁面標准<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 要改為 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2. 設置iframe頁面： body, html{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭頭 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ }
我測試之后完全不行，卡殼了幾天，最終采用插件完成，在此推薦 jquery.nicescroll.min.js 插件
jquery.nicescroll v3.7.6
1. 支持div,iframe,html 等
2. 兼容IE7-8,safari,firefox,webkit內核瀏覽器(chrome,safari)以及智能終端設備瀏覽器的滾動條
3. jq插件，jq 版本要高於 1.8
cursorcolor - 設置滾動條顏色，默認值是“＃000000” cursoropacitymin - 滾動條透明度最小值 cursoropacitymax - 滾動條透明度最大值 cursorwidth - 滾動條的寬度像素，默認為5（你可以寫“5PX”） cursorborder - CSS定義邊框，默認為“1px solid #FFF” cursorborderradius - 滾動條的邊框圓角 ZIndex的 - 改變滾動條的DIV的z-index值，默認值是9999 scrollspeed - 滾動速度，默認值是60 mousescrollstep - 滾動鼠標滾輪的速度，默認值是40（像素） touchbehavior - 讓滾動條能拖動滾動觸摸設備默認為false hwacceleration - 使用硬件加速滾動支持時，默認為true boxzoom - 使變焦框的內容，默認為false dblclickzoom - （僅當boxzoom = TRUE）變焦啟動時，雙點擊框，默認為true gesturezoom - boxzoom = true並使用觸摸設備）變焦（僅當激活時，間距/盒，默認為true grabcursorenabled“搶”圖標，顯示div的touchbehavior = true時，默認值是true autohidemode，如何隱藏滾動條的作品，真正的默認/“光標”=只光標隱藏/ FALSE =不隱藏的背景下，改變鐵路背景的CSS，默認值為“” iframeautoresize中，AUTORESIZE iframe上的load事件（默認：true） cursorminheight，設置最低滾動條高度（默認值：20） preservenativescrolling，您可以用鼠標滾動本地滾動的區域，鼓泡鼠標滾輪事件（默認：true） railoffset，您可以添加抵消頂部/左軌位置（默認：false） bouncescroll，使滾動反彈結束時的內容移動（僅硬件ACCELL）（默認：FALSE） spacebarenabled，允許使用空格鍵滾動（默認：true） railpadding，設置間距（默認：頂：0，右：0，左：0，底部：0}） disableoutline，Chrome瀏覽器，禁用綱要（橙色hightlight）時，選擇一個div nicescroll（默認：true）
使用 jquery.nicescroll.min.js 插件設置的 iframe 滾動條樣式，舉例：
<!--<!DOCTYPE html>--> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> <p>歲月</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="jquery.nicescroll.min.js"></script> </head> <style> .iframe_page{ width: 300px; height: 260px; background-color: #dfdfdf; } .iframe_page #myFrameId{ width: 280px; height: 240px; background-color: #adb9cd; border: 3px dashed #cc9797; } </style> <body style="scrollbar-base-color:red"> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe id="myFrameId" src="inner_page.html"></iframe> </div> <script> $("#myFrameId").niceScroll({ cursorcolor: "#E62020", //滾動條顏色 cursoropacitymax: 0.5, //滾動條透明度 touchbehavior: false, cursorwidth:"5px", cursorborder:"0", cursorborderradius:"5px" }); </script> </body> </html>
運行結果如下：
5. iframe 父頁面調用子頁面
方法1： iframe標簽定義了 id 屬性，eg: <iframe id="myIframeId"></iframe> , 則 iframe 頁面 調用子頁面方法，可使用document.getElementById('myIframeId').contentWindow.***(); /* 1. myIframeId: 為 屬性 id 的值 * 2. ***()方法 寫在 子頁面（即 src 鏈接的文件）中 */ 方法2： iframe標簽定義了 name 屬性，eg：<iframe name="myIframeName"></iframe> ,則 iframe 頁面調用子頁面方法，可使用 myIframeName.window.***() /* 1. myIframeName: 為 屬性 name 的值 * 2. ***()方法 寫在 子頁面（即 src 鏈接的文件）中 */
舉例： 主頁面（test.html -- 同時定義了 id 和 name）和子頁面（inner_page.html ）具體內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; border: 3px dashed #cc9797; } </style> <body> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe name="myFrameName" id="myFrameId" src="inner_page.html" onload="callChildPage()"></iframe> </div> <script> /** * 父頁面方法：調用子頁面的方法 */ function callChildPage() { myFrameName.window.childSayHello(); //效果等價於 document.getElementById("framePage").contentWindow.childSayHello(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /** * 子頁面方法： 父頁面要調用的方法 */ function childSayHello() { alert('welcome: function in child'); } </script> </body> </html>
6. iframe 子頁面調用父頁面
iframe src鏈接的子頁面 調用 iframe父頁面 方法，使用 window.parent.***();
/* 1. window.parent.***() 等價於 parent.***() //即 window 可以省略
* 2. ***()方法 寫在 父頁面（即 iframe標簽所在的文件）中
*/
舉例： 主頁面（test.html）和子頁面（inner_page.html）具體內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; border: 3px dashed #cc9797; } </style> <body> <!-- 嵌入 iframe 模塊 --> <div class="iframe_page"> <iframe id="framePage" src="inner_page.html"></iframe> </div> <script> /** * 父頁面方法： 子頁面要調用的方法 */ function parentSayHello() { alert('welcome: function in parent.'); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body onload="callParentFunc()"> <script> /** * 子頁面方法：用於調用父頁面方法 */ function callParentFunc() { window.parent.parentSayHello(); //等價於 parent.parentSayHello(); } </script> </body> </html>
總結 5-6，父窗口與子窗口方法調用
方法1：id 屬性法
1. HTML語法：<iframe id="myFrameId" src="child.html"></html> 2. 父窗口調用子窗口:
JS：document.getElementById("myFrameId").contentWindow.childMethod()
JQuery: $('#myFrameId')[0].contentWindow.childMethod(); 3. 子窗口調用父窗口：window.parent.parentMethod() 或 parent.parentMethod()
方法2：name 屬性法
1. HTML語法：<iframe name="myFrameName" src="child.html"></html> 2. 父窗口調用子窗口: myFrameName.window.childMethod() 3. 子窗口調用父窗口：window.parent.parentMethod() 或 parent.parentMethod()
注：
父頁面要改變子頁面某個標簽中的值，eg：改變id="button"的文字時，可用：
id 屬性法：document.getElementById("test").value = "調用結束";
name 屬性法：myFrameName.window.document.getElementById("button").value="調用結束";
子頁面要改變父頁面某個標簽中的值，eg：改變id="test"的文字時，可用:
id 屬性法:
JS：window.parent.document.getElementById("test").value = "調用結束";
JQuery：$(window.parent.document).contents().find("#test").val("調用結束");
name 屬性法：
parent.window.document.getElementById("button").value="調用結束";
有問題或有其他的歡迎大家指導哈~~
后續繼續努力~~