html 框架 iframe
https://www.xiaobuteach.com/html/markup-base/iframe.html?from=bili
html 框架 iframe
1 為什么需要iframe
frameset是把多個(gè)已經(jīng)有頁(yè)面整合成一個(gè)新的頁(yè)面，這個(gè)新頁(yè)面并非普通頁(yè)面：只有frameset，沒(méi)有body。
能否在一個(gè)普通頁(yè)面里嵌套另外一個(gè)頁(yè)面？能。
iframe可以在一個(gè)普通頁(yè)面的指定位置嵌套另一個(gè)頁(yè)面。
2 語(yǔ)法
<iframe src="頁(yè)面地址" >
可以頁(yè)面1的指定位置放入頁(yè)面2。
3 示例
準(zhǔn)備工作
d10-iframe-p1.html頁(yè)面內(nèi)容如下
<body>
? ?<div>頁(yè)面1 ?AAAA</div>
? ?<div>頁(yè)面1 ?BBBB</div>
? ?<div>頁(yè)面1 ?CCCC</div>
? ?<div>頁(yè)面1 ?DDD</div>
</body>
d10-iframe-p2.html頁(yè)面內(nèi)容如下
<body>
? ?<div style="width: 300px;height: 200px;background-color: #00f;color:#fff;">頁(yè)面2</div>
</body>
現(xiàn)在需要在d10-iframe-p1.html的第3行 "頁(yè)面1 CCCC"后放入 d10-iframe-p2.htm頁(yè)面的內(nèi)容。
p1.html頁(yè)面修改如下
<body>
? ?<div>頁(yè)面1 ?AAAA</div>
? ?<div>頁(yè)面1 ?BBBB</div>
? ?<div>頁(yè)面1 ?CCCC</div>
? ?<iframe src="d10-iframe-p2.html"></iframe>
? ?<div>頁(yè)面1 ?DDD</div>
</body>
iframe默認(rèn)樣式有點(diǎn)丑，接一來(lái)進(jìn)一步美化。
4 iframe常用屬性
iframe常用屬性說(shuō)明src嵌入頁(yè)面地址。width寬度。height高度。frameborder默認(rèn)顯示邊框，丑。設(shè)置為0取消。scrolling當(dāng)寬高超出時(shí)，會(huì)顯示滾動(dòng)條。設(shè)置為no取消。name設(shè)置名稱，類似與frame的name，與鏈接a標(biāo)簽的target配合使用。
iframe的寬高：并不會(huì)根據(jù)被嵌入頁(yè)面的寬高來(lái)自動(dòng)調(diào)整寬高。后續(xù)可以通過(guò)JavaScript來(lái)做自適應(yīng)。這里我們先通過(guò)width與height設(shè)置寬度。
<iframe src="d10-iframe-p2.html" width="300px" height="200px" frameborder="0" scrolling="no"></iframe>
優(yōu)化后樣式
5 通過(guò)iframe實(shí)現(xiàn)后臺(tái)管理首頁(yè)布局
打開(kāi)時(shí)默認(rèn)效果
當(dāng)點(diǎn)擊頁(yè)面1或頁(yè)面2的鏈接時(shí)，下方顯示相應(yīng)頁(yè)面。
后臺(tái)管理頁(yè)面布局特點(diǎn)
用戶切換菜單時(shí)，整個(gè)頁(yè)面好像并沒(méi)有跳轉(zhuǎn)， 用戶體驗(yàn)良好。
具體實(shí)現(xiàn)
三個(gè)基礎(chǔ)頁(yè)面：d09-welcome，d09-page1.html，d09-page2.html，代碼略。
"后臺(tái)首頁(yè)" d10-iframe-p3.html代碼
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8" >
? ?<title>html iframe 例子 | 小步教程</title>
</head>
<body>
? ?<h1>導(dǎo)航菜單</h1>
? ?<div><a href="d09-page1.html" target="frameMain">頁(yè)面1</a></div>
? ?<div><a href="d09-page2.html" target="frameMain">頁(yè)面2</a></div>
? ?<div>
? ? ? ?<iframe src="d09-welcome.html" name="frameMain" width="300px" height="200px" frameborder="0" scrolling="no"></iframe>
? ?</div>
</body>
</html>
鏈接的target屬性與iframe的name屬性一致，表示點(diǎn)擊鏈接時(shí)，在iframe的位置打開(kāi)新頁(yè)面。
