inculde html文件,htmlinclude调用公用html模板文件说明「终于解决」

inculde html文件,htmlinclude调用公用html模板文件说明「终于解决」html中引入调用另一个html的方法有很多种,我都尝试了一下,就把他们都列出来吧:其中推荐第一种和第六种,因为代码太长就写在最后了。其他的方法,可以自己尝试,看是不是适合你当前项目。一、需要借助jquerydiv+$(“#page1”).load(“b.html”)。参考代码:二、iframe会生成一个边框,需要重新设置一下样式,相当于在页面内嵌入了一个页面。参考代码:三、…

大家好,欢迎来到IT知识分享网。

html中引入调用另一个html的方法有很多种,我都尝试了一下,就把他们都列出来吧:

其中推荐第一种和第六种,因为代码太长就写在最后了。其他的方法,可以自己尝试,看是不是适合你当前项目。

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

参考代码:

    

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

参考代码:

   

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

参考代码:

        

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

参考代码:

                console.log(page1.import.body.innerHTML);    

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

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

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

2、在页面中通过  载入模板文件。

参考代码:

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 = /([\s\S]*?)/g;var r = “”;while(r = mac.exec(content)) {    eval(r[1]);}},getHtml: function(content) {    var mac = /([\s\S]*?)/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 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/26427.html

(0)
上一篇 2023-05-05 11:00
下一篇 2023-05-07 22:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信