- 第一种,使用iframe标签
<iframe id="f2" name="f2" src='/templates/bianlan.html' width="100%" height="600" target="_self" style="border: none;background-color: rgba(204, 202, 224, 0.6);"></iframe>
- 第二种,script标签引入(需要jquery)
<script> $("body").load("/templates/bianlan.html"); </script>
- 第三种,使用<object>标签
<object style="border:0" type="text/x-scriptlet" data="/templates/bianlan.html" width=100% height=600></object>
推荐iframe比较简单,第二种需要做较多的调整,第三种比前两种都要好,但是页面比例需要自己调整
以下为代码
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- <link href="/templates/bianlan.html" type="text/html" rel="start">--> <script src="../static/js/adapter.js"></script> <!--rem适配js--> <link rel="stylesheet" href="../static/css/base.css"> <!--初始化文件--> <link rel="stylesheet" href="../static/css/menu.css"> <!--主样式--> </head> <body> <div id="bianlan"></div> <!--<iframe src="/templates/bianlan.html"></iframe>--> <!--<iframe id="f2" name="f2" src='/templates/bianlan.html' width="100%" height="600" target="_self" style="border: none;background-color: rgba(204, 202, 224, 0.6);"></iframe>--> <script> $("body").load("/templates/bianlan.html"); </script> <!--<object style="border:0" type="text/x-scriptlet" data="/templates/bianlan.html" width=100% height=600></object>--> <!--<script type="text/html" src="/templates/bianlan.html"></script>--> chengg <script src="../static/js/menu.js"></script> <!--控制js--> </body> </html>
bialan.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JavaScript可展开隐藏的侧边栏下拉菜单DEMO演示</title> </head> <body> <div style="text-align:center;clear:both"> </div> <div id="menu"> <!--隐藏菜单--> <div id="ensconce"> <h2> <img src="../static/picture/show.png" alt=""> 后台管理系统 </h2> </div> <!--显示菜单--> <div id="open"> <div> 后台管理系统 <span><img src="../static/picture/obscure.png" alt=""></span> </div> <div> <ul> <li> <h2>员工管理<i></i></h2> <div> <h3>添加员工</h3> <h3>删除员工</h3> <h3>查看所有</h3> <h3>启用or禁用</h3> </div> </li> <li> <h2>南京景点<i></i></h2> <div> <h3>栖霞寺</h3> <h3>夫子庙</h3> <h3>海底世界</h3> <h3>中山陵</h3> <h3>乌衣巷</h3> <h3>音乐台</h3> </div> </li> <li> <h2>上海景点<i></i></h2> <div> <h3>东方明珠</h3> <h3>外滩</h3> <h3>豫园</h3> <h3>文庙</h3> <h3>世博园</h3> <h3>田子坊</h3> </div> </li> <li> <h2>深圳景点<i></i></h2> <div> <h3>华侨城</h3> <h3>观澜湖</h3> <h3>世界之窗</h3> <h3>东门老街</h3> <h3>七娘山</h3> <h3>光明农场</h3> </div> </li> <li> <h2>广州景点<i></i></h2> <div> <h3>白云山</h3> <h3>长隆</h3> <h3>黄花岗公园</h3> <h3>中山纪念堂</h3> <h3>华南植物园</h3> <h3>南沙湿地公园</h3> </div> </li> </ul> </div> </div> </div> </body> </html>
未经允许不得转载:墨轩阁博客 » HTML页面引入的三种方法