核心提示:在前端开发中我们基本上都会遇到这么一个问题,就是一个页面需要在多个页面中重复使用,这个时候我们会想到把公共的部分提取出来单独作为一个html文件,然后导入到其他页面当中;今天在开发中就遇到此问题,纠结...
在前端开发中我们基本上都会遇到这么一个问题,就是一个页面需要在多个页面中重复使用,这个时候我们会想到把公共的部分提取出来单独作为一个html文件,然后导入到其他页面当中;
今天在开发中就遇到此问题,纠结了很久,两三个小时才把问题解决,到处百度,在学习交流群里问,简直是坑死我了;
先说下我遇到的情况,我使用的是bootstrap框架,写了一个公共的header.html,准备在index.html中导入这个公共的header.html,于是我百度到了一种方法是:
使用js,在index.html加载完的时候加载header.html,写法是:
$(function(){
$('header').load(header.html)
})
这样的确能够将页面导入进去,可是结果发现bootstrap的js失效了,估计是冲突了吧,整了半天也没解决,后来有大佬建议使用iframe这个东西
其实我本人也是强烈推荐使用iframe的,不了解的话可以先百度查查iframe的用法,不过这里有个坑就是自适应高度和宽度的问题,因为iframe要求事先固定一个高度的,如果没有设定高度,iframe会自己取一个神奇的高度导致页面的高度不够,这个iframe的用法还需要多多借鉴;
其实,最简单的方法就是将这个问题交给后端去解决,哈哈哈哈;由于博主使用的后台是python和django框架,所以使用include轻轻松松出困境啊;在这里想说的就是,做前端不能只是傻傻的做前端,多方面的了解下问题,并不是什么坏事