我们在使用代码编程一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引进去,就能节省很多时间,减少很多代码。
在这里,有好几种引入html文件的方式,不过每种都是有利有弊,需要根据需要自行选择
有大佬反馈解决了有些浏览器本地实现不了的问题:放到服务器上面!(感谢!!!)
注意:引入后主页面的Css样式不适用于被引入页面,比如在主页面设置
*{
margin: 0;
padding: 0;
}
只在本页面生效,引入文件整体适用,但引入文件内容不适用。
import引入(
中引入文件,你好呀!
document.write(page2.import.body.innerHTML);
最后的运行效果:
import引入运行效果
为了客观反应不同方式的引入差距,下面是浏览器代码界面:
控制台检查
由上图可以看出,import引入除开script标签,在其他html body中写入什么就引入什么,完全的内容格式.
js引入
你好,我在中间!
//在js中引入
$(document).ready(function () {
$('.top').load('top.html');
$('.footer').load('fotter.html');
});
使用js引入,相当于把引入的html中head和body标签中的数据拖出来,在外面包了一个你自己写的标签,比如说上面代码中的
运行结果同import相同,这里不再展示
注意:是head和body标签中的数据,不带标签,下图是浏览器显示代码
js引入
include 引入(涉及到一个从网上扒的封装函数,下面有)(head和body标签中的数据直接引入)
你没有看错,我在这!
浏览器代码分析
include引入
include.js压缩代码:
(function(window,document,undefined){var Include39485748323=function(){};Include39485748323.prototype={forEach:function(array,callback){var size=array.length;for(var i=size-1;i>=0;i-=1){callback.apply(array[i],[i])}},getFilePath:function(){var curWwwPath=window.document.location.href;var pathName=window.document.location.pathname;var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);return localhostPaht+projectName},getFileContent:function(url){var ie=navigator.userAgent.indexOf('MSIE')>0;var o=ie?new ActiveXObject('Microsoft.XMLHTTP'):new XMLHttpRequest();o.open('get',url,false);o.send(null);return o.responseText},parseNode:function(content){var objE=document.createElement("div");objE.innerHTML=content;return objE.childNodes},executeScript:function(content){var mac=/
object引入和iframe引入(带有滚动条,视情况使用)
>
两中引入方式比较:
相同点:
默认高度为150
引入后本页面html嵌套引入页面html,整个引入
不同点:
iframe引入使用scrolling="no"可以不让页面进行滚动,取消右侧滚动条
iframe中 frameborder="no"可以修改为0或1,这里不是指宽度,可以理解为布尔型,当设为1时border宽度为2
以iframe为例展示引入top.html浏览器代码
iframe引入