html引入另一html

2019-12-07 19:40:59 浏览数 (1)

include 引入(涉及到一个从网上扒的封装函数,下面有)(head和body标签中的数据直接引入)
代码语言:javascript复制
<body>
    <!--include引入,顺序很重要-->
    <script src="js/include.js"></script>
    <include src="top.html"></include>
    <include src="center.html"></include>
    <div id="">
        <p>你没有看错,我在这!</p>
    </div>
    <include src="fotter.html"></include>
</body>

include.js压缩代码:

代码语言:javascript复制
(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=/<script>([sS]*?)</script>/g;var r="";while(r=mac.exec(content)){eval(r[1])}},getHtml:function(content){var mac=/<script>([sS]*?)</script>/g;content.replace(mac,"");return content},getPrevCount:function(src){var mac=/..//g;var count=0;while(mac.exec(src)){count =1}return count},getRequestUrl:function(filePath,src){if(/http:///g.test(src)){return src}var prevCount=this.getPrevCount(src);while(prevCount--){filePath=filePath.substring(0,filePath.substr(1).lastIndexOf('/') 1)}return filePath "/" src.replace(/..//g,"")},replaceIncludeElements:function(){var $this=this;var filePath=$this.getFilePath();var includeTals=document.getElementsByTagName("include");this.forEach(includeTals,function(){var src=this.getAttribute("src");var content=$this.getFileContent($this.getRequestUrl(filePath,src));var parent=this.parentNode;var includeNodes=$this.parseNode($this.getHtml(content));var size=includeNodes.length;for(var i=0;i<size;i =1){parent.insertBefore(includeNodes[0],this)}$this.executeScript(content);parent.removeChild(this);})}};window.onload=function(){new Include39485748323().replaceIncludeElements()}})(window,document);

参考原文:https://www.jianshu.com/p/c4f18bea8cab

0 人点赞