load方法实现头部底部复用

我什么不用iframe标签

    在我们的项目开发时，我们经常遇到这样的三栏式布局，所有的页面头部和底部的样式一样，只有中间的内容不同。
    这个时候，如果我们在每个页面都把头部，底部的代码的复制粘贴 一次，当布局需要修改时，每个页面都需要去修改，无疑浪费了我们不少时间。
    我不用iframe标签的原因是，当我使用了iframe标签，我用浏览器查看时会出现两个body，即便我的头部HTML文件中没有头部和body。也就是我们看到的首页面实际上是两个HTML文件组成的。这种方式，对于我们需要隐藏的登录注册窗口并不友好。因为当我们点击登录时，有时候需要给 body加上遮罩层，由于用了iframe，我们需要给头部的body和中间内容的body都加上遮罩。还有就是iframe的自适应高度问题，也需要我们用js来实现。用了iframe，我需要费心思去解决自适应高度，去做遮罩问题，以及一些相比较下不太麻烦的样式问题。用了它之后，我个人的感受就是要做的工作更多了。感觉这样还不如复制粘贴了。

load方法的使用

    关于load的使用方法很简单，看如下代码：

<script>
        $(function() {
            $("#header").load("../html/head.html");
        });
 </script>

没错就是这么简单，一行代码搞定，关于头部的css只需要在你引入HTML的页面 ，引入css就好啦。在你的头部文件中只需要写头部中间的内容哈。

在我第一次用它时，敲完这一行神清气爽，如沐春风。但是 当我打开浏览器时我怀疑人生了。我的头部并没有显示出来，且报错跨域。此时内心一万个问号。

    经过我小航同学在网上查询之后，才知道这个方法需要在服务器模式下打开。

前端文件如何以服务器模式打开

    方法一：在项目目录打开终端，输入npm http-server-g,安装好之后，再在终端输入 js命令就好了。

    方法二：打开vs code 在应用商店搜索live server并安装。然后在目录下的HTML文件，右键open with live server。

js文件失效问题

    当我的文件成功地以服务器模式打开后，发现我的头部js文件失效了。

调试之后发现是js执行顺序问题。我把js文件也放入了我的头部HTML，问题就解决了。

问题解决完了，给大家推介一首歌，启示-周深。