Iframe標籤的用法

2021-09-11 06:39:09 字數 1052 閱讀 3317

什麼是iframe?

iframe是乙個嵌入式框架,他可以把乙個網頁巢狀到現有的網頁中。

如何巢狀?

利用iframe標籤的src屬性巢狀;

初級美化: 可以設定iframe的一些基本css樣式來美化頁面。

(1) 是否顯示邊框

(2) 定義寬度

(3) 定義高度

(4) 是否顯示滾動條

寬度我們一般定義為100%,不顯示邊框。定義乙個固定高度,滾動條自適應。

中級美化 : 高度自適應

由於我們巢狀的頁面的高度有大有小。而我們如果要定義固定高度一定要大於最大頁面的高度才會不顯示iframe中的滾動條

當我們設定了固定高度,巢狀高度比較小的頁面時下方會有一塊非常大的空白

優化方法:高度自適應

我們首先想到的是不設定高度讓他自適應,事實證明並不行。iframe不會被他的巢狀的內容撐大。

我們只能動態的設定他的高度。

但是想要動態的設定iframe的高度,必須獲取巢狀頁面的高度在將該高度設定為iframe的高度。

在主介面如何獲取巢狀頁面的屬性呢?

這裡我們要引入乙個方法。

只要在iframe標籤的載入事件(「setiframeheight()」)呼叫該方法就可以實現高度自適應。

由於我們用的是流逝布局。當瀏覽器改變時子頁面的高度有可能會發生變化。

瀏覽器改變事件觸發高度自適應。

高階美化: 有上面這些基本夠了,但是我們在操作子頁面的時候有可能會讓子頁面高度發生變化。

我們首先想到的是監聽事件。但是無論是jquery還是js都沒有監聽高度改變的事件。

那我們只能通過定時器不斷的獲取高度,不斷的重新設定高度。

iframe標籤的使用

我使用原生引入頁面用到 iframe 標籤,發現沒有效果,經查詢 給 標籤裡加上 public w3c dtd xhtml 1.0 transitional en 還有給 html 標籤 裡加上 xmlns 然後啟動頁面就可以看到效果了。如果你想iframe 標籤可以高度自適應可以試試我封裝的這個函...

iframe標籤 使用

1.html 節點 並給src 賦值頁面所在的相對路徑 可以直接給src賦值,也可以通過js進行賦值 iframe id iframeconatiner src iframe iframe id iframeconatiner src 頁面所在的相對路徑 iframe script function...

iframe標籤用法詳解 屬性 透明 自適應高度

屬性 值描述dtd標籤的 align 屬性 href rel noopener noreferrer align 不贊成使用。請使用樣式代替。規定如何根據周圍的元素來對齊此框架。tf標籤的 frameborder 屬性 href rel noopener noreferrer frameborder...