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

本文链接：https://blog.csdn.net/weixin_43709908/article/details/103348674

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名")

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