w3h5

html中引入调用另一个公用html模板文件的方法

最近写网页的时候,发现页面都是用的同一个header头部、aside侧边栏和footer页脚,那么为什么不把这些写成一个模板文件,在页面中直接引入呢?这样还方便后期的修改维护。

admin1.png html中引入调用另一个公用html模板文件的方法 HTML笔记

查了一下资料,发现html中引入调用另一个html的方法有很多种,我都尝试了一下,就把他们都列出来吧:
其中推荐第一种和第六种,因为代码太长就写在最后了。其他的方法,可以自己尝试,看是不是适合你当前项目。

一、需要借助 jquery div+$("#page1").load("b.html") 。

参考代码:

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
          $("#page1").load("page/Page_1.html");
          $("#page2").load("page/Page_2.html");
    </script>
</body>

二、iframe 会生成一个边框,需要重新设置一下样式,相当于在页面内嵌入了一个页面。

参考代码:

<head>
</head>
<body>
   <div id="page1">
        <iframe align="center" width="100%" height="170" src="page/Page_1.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
   <div id="page2">
        <iframe align="center" width="100%" height="170" src="page/Page_2.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
</body>

三、object引入 同样会生成一个边框,需要重新设置一下样式。

参考代码:

<head>
    <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150>
    </object>
</head>

四、import引入 这个我并没有试验成功,可能是我打开方式不对。
参考代码:

<head>
    <link rel="import" href="page/Page_1.html" id="page1">
</head>
<body>
    <script>
        console.log(page1.import.body.innerHTML);
    </script>
</body>

参考文章:https://www.web-tinker.com/article/20637.html

五、bootstrap的panel组件,或者easyui的window组件,有点类似这个效果;

六、通过一个 include.js 控制引入文件。

1、将下方js文件代码保存成 include.js 文件引入;

2、在页面中通过 <include src=""><include> 载入模板文件。

参考代码:

<include src="templates/header.html"></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--){
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>([\s\S]*?)<\/script>/g;
var r = "";
while(r = mac.exec(content)) {
    eval(r[1]);
}
},
getHtml: function(content) {
    var mac = /<script>([\s\S]*?)<\/script>/g;
    content.replace(mac, "");
    return content;
},
getPrevCount: function(src) {
    var mac = /\.\.\//g;
    var count = 0;
    while(mac.exec(src)) {
        count++;
    }
    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++) {
            parent.insertBefore(includeNodes[0], this);
        }
        //执行文本中的额javascript  
        $this.executeScript(content);
        parent.removeChild(this);
        //替换元素 this.parentNode.replaceChild(includeNodes[1], this);  
    })
}
}
window.onload = function() {
    new Include39485748323().replaceIncludeElements();
}
})(window, document)


参考:

1、html中引入调用另一个html的方法

2、html静态页面引入公共html页面


声明:本文由w3h5原创,转载请注明出处:《html中引入调用另一个公用html模板文件的方法》 https://www.w3h5.com/post/53.html

赞 (12)
分享到: +More |

评论 6

换个身份

  1. #1
    访客
    你这个字的配色瞎眼啊
    访客 1年前 (2018-12-06)回复 取消评论
    • Deshun
      访问量大的时候模块加载会慢,刷新或者等一下就好了。
      Deshun 1年前 (2018-12-11)回复 取消评论
  2. #2
    访客
    有侧边栏的话怎么切换样式啊?用第六种方法总是在js里拿不到被载入模块里的html
    访客 6个月前 (06-04)回复 取消评论
  3. #3
    访客
    之前用另一个网站的w3-include-html添加模块也一样,使用倒是可以切换,可是要把.html后缀变成.shtml,不想改变后缀。希望大大看到可以早些回复,谢谢!
    访客 6个月前 (06-04)回复 取消评论
  4. #4
    访客
    使用#include file=""倒是可以切换,刚才被屏蔽了
    访客 6个月前 (06-04)回复 取消评论