HTML+CSS之iframe

時間 2019-11-12

標籤 html+css html css iframe 欄目 CSS 简体版

原文原文鏈接

碎碎：這兩天在實踐中，用到了 iframe，以前對其不甚瞭解，瞭解之中遇到好多奇葩問題，今天記錄下這兩天遇到的相關的內容。html

嵌入的 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>

運行顯示以下：jquery

能夠看到 iframe 嵌入頁面，相似層級摞在上面（即 iframe層壓在原來頁面上層），且外面有白色邊框顯示，這就是 iframe 默認顯示樣式。web

取消邊框：只需在 iframe 標籤中設置 frameborder 屬性便可

frameborder 有兩種屬性值：
1. frameborder="0";   //無邊框顯示
2. frameborder="1";   //有邊框顯示 （默認狀態，且邊框爲白色）

eg: 只需將上面文件中的 iframe 標籤內容添加上 frameborder="0" 便可，此時所有代碼以下：

<!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>

更改後的 test_iframe01.html

執行後就會看到上面的白色邊框消失，以下：chrome

邊框樣式設置：

固然，若想層級顯示，但不想要默認的邊框時，咱們能夠自行設置邊框，只需給對應 iframe 頁面設置樣式時，添加上邊框設置

以下：給 id="framePage" 的 iframe 設置 border 屬性，添加後樣式以下：
.iframe_page #framePage{
    width: 300px;
    height: 200px;
    background-color: #adb9cd;
    border: 3px dashed #cc9797;  //設置 iframe邊框樣式
}

更改後的完整代碼以下：

<!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>

更改後的 test_iframe01.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;
}

總體代碼以下：瀏覽器

<!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>

更改後的 test_iframe01.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大小徹底相同，便可實現居中jsp

以下：
.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;
}

完整代碼以下：ide

<!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>

更改後的 test_iframe01.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 插件spa

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）

nicescroll詳細參數配置：

使用 jquery.nicescroll.min.js 插件設置的 iframe 滾動條樣式，舉例：firefox

<!--<!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>

子頁面 inner_page.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>

父頁面 test.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>

主頁面 test.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>

子頁面 inner_page.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>

主頁面 test.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>

子頁面 inner_page.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="調用結束";

有問題或有其餘的歡迎你們指導哈~~

後續繼續努力~~