如何在一个html页面中引入另一个html页面

1.分别写出两个html页面01.html和02.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="/css/mui.min.css"><link rel="stylesheet" href="/css/iconfont.css"><link rel="stylesheet" href="/css/Subject-555.css" id="style"><!-- <link rel="import" href="common01.html" id="page1"> --><script src="/js/mui.js?v=1" type="text/javascript"></script><script src="/js/globalConfig.js"></script><script src="common.js"></script>
</head>
<body>
这个nav的盒子，就是你要引入的html页面要放置的位置，你所引入的页面的html的标签都要在这个盒子里面放着<div id="nav"></div>
</body></html>
<script>
因为我的css使用mui框架写的，所以在要引入的页面进行页面的初始化mui.ready(function () {
这个地方是你引入另外一个页面的方法 路径也写清楚mui("#nav").load("common01.html")})</script>

2.你要使用的界面

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body><nav class="mui-bar mui-bar-tab" style="background: #fff;"><a id="defaultTab" class="mui-tab-item" href="#" data-index='0'><span class="mui-icon mypage"><img src="/images/transparentimage/v2_main-cg.png" class="" style=" height: 25px;"/></span><span class="mui-tab-label margin-top-5 btm">首页</span></a><a class="mui-tab-item" href="#" data-index='1'><span class="mui-icon"><img src="/images/new/v2_class_cg.png" style=" height: 25px;" /></span><span class="mui-tab-label margin-top-5">订单</span></a><a class="mui-tab-item" href="#" data-index='2'><span class="mui-icon"><img src="/images/new/v2_main-gwc.png" style=" height: 25px;" /><span class="mui-badge mui-badge-danger" id="CarCount" style="display:none; left: 100%;"></span></span><span class="mui-tab-label margin-top-5">购物车</span></a><a class="mui-tab-item" href="#" data-index='3'><span class="mui-icon"><img src="/images/new/v2_main-wd.png" style=" height: 25px;" /></span><span class="mui-tab-label margin-top-5">我的</span></a></nav>
</body>

3.在2的页面中，可能你会用到一些css的样式，这些样式都要在你01.html中进行引入

4.你在02.html中所用到的一些逻辑问题的js，也要自己封装一个js的文件夹，在01.html进行引入的使用

总结下来：

01.html 是你要引入别的页面的大页面

02.html 是你需要使用的页面，也就是要进行引入的页面小页面

还有02.js。02.css 是02.html中所使用的一些外面的文件，也要在01.html中进行引入。

5.就是你在引入到其他页面的时候，使用02.html中的一些类名时，一定要在02.js中的开始加上window.οnlοad=function（）{}

在进行获取页面的类名信息，因为如果不使用这样的方法，实际上在你进行获取时，页面的元素还没有加载完成，可能会出现报错的情况。

调用load方法的完整格式是：load( url, [data], [callback] )参数分别url地址、文件类型（php、html等）、回调函数，也支持选择器加载load("test.html #内容id名")

加油吧，骚年们，我们都要心怀梦想，希望有一天能够成为大佬！！！

如何在一个html页面中引入另一个html页面相关推荐

在html页面中引入另一个html页面
我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引 ...
html里面怎么引别的页面_如何在一个html文件中引入另一个html文件？
展开全部在html页面中引入另一个html页面的标签 1.32313133353236313431303231363533e58685e5aeb931333365633864用iframe标签 2. ...
html5 载入另一个页面,如何将一个html页面中嵌入另一个html页面
将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topm ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
在一个js文件中引入另一个js文件
第一个js文件(被引入的js文件),文件名one.js,内容如下 function alertInOne(){ alert('in one'); } 第二个js文件,文件名two.js,内容如 ...
在一个JSP页面中包含另一个JSP页面的三种方式
转载自://http://blog.163.com/neu_lxb/blog/static/179417010201121343132918/ (1)include指令 include指令告诉容器:复 ...
同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用'$'符号作为其代号.因此在一个页面中引入多个JS库,并且使用'$'作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
1. 使用HTML的link标签import另一个HTML页面 1.1 在HTML页面的<head>标签内使用<link>标签引入另一个HTML页面("centerH ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...

如何在一个html页面中引入另一个html页面

如何在一个html页面中引入另一个html页面相关推荐

最新文章

热门文章