基於iframe的後台頁面

一、前言

web端的後台管理員頁面，基本都是頁頭、頁尾，中間左側選單，右側為主要頁面。實現的方法有多種，iframe是最常見的一種。

二、頁面檔案及介面

檔案目錄：

介面詳情：

介面有點醜，別介意，接下看看如何實現。

三、各頁面**

index.html

<

html
>
<
head
>
<
title
>index
title
>
<
style
>
div 
style
>
head
>
<
body
>
<
iframe 
src="head.html"
frameborder
="0"
style
="width: 100%; height: 10%; overflow:hidden; background-color: blue;"
>
iframe
>
<
div 
style
="width: 100%; height: 80%; overflow:hidden;"
>
<
div><
iframe 
src="side.html"
frameborder
="0"
>
iframe
>
div>
<
div><
iframe 
name
="main"
src="page1.html"
frameborder
="0"
>
iframe
>
div>
div>
<
iframe 
src="foot.html"
frameborder
="0"
style
="width: 100%; height: 10%; overflow:hidden; background-color: blue;"
>
iframe
>
body
>
html
>

<

html
>
<
head
>
<
title
>head
title
>
head
>
<
body
>
head
body
>
html
>

<

html
>
<
head
>
<
title
>
title
>
head
>
<
body
>
foot
body
>
html
>

<

html
>
<
head
>
<
title
>side
title
>
head
>
<
body
>
<
a href
="page1.html"
target
="main"
>page1.html
a>
<
a href
="page2.html"
target
="main"
>page2.html
a>
body
>
html
>

<

html
>
<
head
>
<
title
>page1
title
>
head
>
<
body
>
page1
body
>
<
script
>
let message ="
page1";
console.log(message);
script
>
html
>

<

html
>
<
head
>
<
title
>page2
title
>
head
>
<
body
>
page2
body
>
<
script
>
let message ="
page2";
console.log(message);
script
>
html
>

四、總結

上面的頁面比較基本，可以在這個基礎上，使用流行的前端介面如bootstrap、elementui、layui，以及前端框架比如jquery、vue

基於iframe父子頁面傳值的方法。

之前專案中用layer.js作為彈窗的框架，發現layer.js中大部分彈窗都是通過iframe模擬的。為此，在專案中遇到了不少坑。印象最深的就是父子頁面傳值的問題。後面經過一段時間的研究。總結出以下幾種方法 一 在子頁面的js中直接使用parent獲取父級頁面中的物件方法。如 document r...

iframe子頁面操作父頁面

最近經常用到iframe，用的最多的就是在子頁面中操作父頁面的方法或變數等，總結了用到的幾種方法，如下 var htmlurl window.parent.main frame attr src jquery 獲取父頁面的iframe的src屬性值 其實獲取父頁面的乙個引數或方法有很多種的寫法，現在...

後台關於鏈結iframe問題

昨天晚上收拾完，冒著晚睡的風險開啟了電腦改了幾行 不出意外又遇到了 坑 問題描述 後台顯示主介面index.jsp，右側進來首頁面 顯示結果 導進來的ifram只有500 150的大小，出現滾動條 修改方法 給iframe新增height,因為是做的響應式利用了 查詢 media設定了min hei...