iframe撰寫
<iframe id="iframe"
name="iframe"
height="100%"
width="100%"
src="https://www.baidu.com"
scrolling="auto"
frameborder="0"
onload="changeFrameHeight()">
</iframe>
iframe的引數
| iframe引數 | 取值 | 描述 |
|---|---|---|
| align | left、right、top、middle、bottom | 對齊方式，規定如何根據周圍的元素來對齊此框架， |
| height | 像素值(px等)、百分比% | iframe 的高度， |
| width | 像素值(px等)、百分比% | iframe 的寬度， |
| longdesc | URL地址 | 規定一個頁面，該頁面包含了有關 iframe 的描述資訊， |
| frameborder | 1、0 | 是否顯示邊框，（0無邊框、1有邊框） |
| border | 像素值 | 邊框的厚度，默認為0 |
| bordercolor | 顏色 | 邊框的顏色 |
| marginheight | pixels | 定義 iframe 的【頂部和底部】的邊距，也就是上下空出的高度， |
| marginwidth | pixels | 定義 iframe 的【左側和右側】的邊距，也就是左右空出的高度， |
| name | 自定義名稱 | 規定 iframe 的名稱， |
| sandbox | allow-forms、allow-same-origina、llow-scripts、allow-top-navigation | 啟用一系列對 iframe 中內容的額外限制， |
| scrolling | yes、no、auto | 是否在 iframe 中顯示滾動條，（yes有滾動條，no無滾動條，auto交給瀏覽器） |
| seamless | seamless | 規定 看上去像是包含檔案的一部分， |
| src | URL地址 | 規定在 iframe 中顯示的頁面的 URL地址，鏈接到的地址， |
| srcdoc | HTML_code | 規定在 iframe 中顯示的頁面的 HTML 內容， |
| allowtransparency | yes、no | 背景是否透明（yes透明、no不透明） |
| framespacing | 像素值（取值：正整數和0） | 相鄰間距，相鄰浮動幀之間的間距 |
JS讀取height賦值
<script>
function changeFrameHeight() {
var iframe = document.getElementById("iframe");
iframe.height = document.documentElement.clientHeight;
}
//onresize屬性可以用來獲取或設定當前視窗的resize事件的事件處理函式
//onresize事件會在視窗或框架被調整大小時發生
window.onresize = function() {
changeFrameHeight();
}
</script>
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/235506.html
標籤：其他
上一篇：前端學習（2740）：重讀vue電商網站50之Element-UI 組件按需加載
下一篇：LeetCode題解：尋找峰值