基于iframe的后台页面
一、前言
Web端的后台管理员页面,基本都是页头、页尾,中间左侧菜单,右侧为主要页面。实现的方法有多种,iframe是最常见的一种。
二、页面文件及界面
文件目录:
界面详情:
界面有点丑,别介意,接下看看如何实现。
三、各页面代码
index.html
<html> <head> <title>index</title> <style> div { float: left; background-color: green; } </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>
head.html
<html> <head> <title>head</title> </head> <body> head </body> </html>
foot.html
<html> <head> <title></title> </head> <body> foot </body> </html>
side.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>
page1.html
<html> <head> <title>page1</title> </head> <body> page1 </body> <script> let message = "page1"; console.log(message); </script> </html>
page2.html
<html> <head> <title>page2</title> </head> <body> page2 </body> <script> let message = "page2"; console.log(message); </script> </html>
side.html页面中的<a>标签,通过target指向name为main的<iframe>打开指定页面。
四、总结
上面的页面比较基本,可以在这个基础上,使用流行的前端界面如BootStrap、ElementUI、LayUI,以及前端框架比如JQuery、Vue