html页面引入另一个html页面

我们在使用代码编程一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引进去,就能节省很多时间,减少很多代码。

在这里,有好几种引入html文件的方式,不过每种都是有利有弊,需要根据需要自行选择
有大佬反馈解决了有些浏览器本地实现不了的问题:放到服务器上面!(感谢!!!)

注意:引入后主页面的Css样式不适用于被引入页面,比如在主页面设置

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
</style>

只在本页面生效,引入文件整体适用,但引入文件内容不适用。


  • import引入(<head>中引入文件,<script>中加载内容)
href链接引入的html文件,id可以看做页面引导,在script中用到
<head>
    <meta charset="utf-8" />
    <title>主页面</title>
    <!--import引入-->
    <link rel="import" href="top.html" id="page1"/>
    <link rel="import" href="fotter.html" id="page2"/>
</head>
<!--注意顺序-->
        <!--import在头部引入,里面是啥就是啥-->
        <script type="text/javascript">
            document.write(page1.import.body.innerHTML);
        </script>
        你好呀!    <!--本页面写入内容-->
        <script type="text/javascript">
            document.write(page2.import.body.innerHTML);
        </script>

最后的运行效果:

import引入运行效果

为了客观反应不同方式的引入差距,下面是浏览器代码界面:

控制台检查

由上图可以看出,import引入除开script标签,在其他html body中写入什么就引入什么,完全的内容格式.


  • js引入
<!--注意顺序-->
        <!--使用js引入,引入整个文档,但是没有html和body,相当于body里面的数据-->
        <div class="top"></div>
        <div class="center">
            <p>你好,我在中间!</p>
        </div>
        <div class="footer"></div>

        <script src="js/jq/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            //在js中引入
            $(document).ready(function () {
                $(‘.top‘).load(‘top.html‘);
                $(‘.footer‘).load(‘fotter.html‘);
            });
        </script>

使用js引入,相当于把引入的html中head和body标签中的数据拖出来,在外面包了一个你自己写的标签,比如说上面代码中的<div class="top"></div>

运行结果同import相同,这里不再展示

注意:是head和body标签中的数据,不带标签,下图是浏览器显示代码

js引入


  • include 引入(涉及到一个从网上扒的封装函数,下面有)(head和body标签中的数据直接引入)
<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引入

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=/<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+=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);
  • object引入和iframe引入(带有滚动条,视情况使用)
<!--object引入,相当于把整个页面拉过来(在一个html中嵌套另一个html),包括title,meta,body,html等-->
        <!--此处的高是嵌套进去的整个html的高,不包括边框,padding等-->
        <object style="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px"></object>

        <!--iframe引入,同object方式一样,页面整个嵌套,默认高度为150,frameborder设置为1时边框宽度为2-->
        <iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no" <!--scrolling="no"-->></iframe>

两中引入方式比较:

  • 相同点:

    1. 默认高度为150
    2. 引入后本页面html嵌套引入页面html,整个引入
  • 不同点:
    1. iframe引入使用scrolling="no"可以不让页面进行滚动,取消右侧滚动条
    2. iframe中 frameborder="no"可以修改为0或1,这里不是指宽度,可以理解为布尔型,当设为1时border宽度为2
      以iframe为例展示引入top.html浏览器代码

      iframe引入

作者:东冥羽
链接:https://www.jianshu.com/p/c4f18bea8cab
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/2019gdiceboy/p/11731158.html

时间: 2024-11-09 06:22:08

html页面引入另一个html页面的相关文章

【JS】测试:HTML页面引入另一个HTML页面,同名ID会冲突吗

今天被问到一个问题,就是当页面HTML页面引入了另外一个HTML页面,恰好2个页面具有相同的ID,那么需要用ID来处理一些行为的时候会发生冲突或者报错吗? 我用了iframe来引入另外一个HTML页面. 先准备好材料:1个HTML页面(含iframe标签,我命名为test.html),再加一个HTML页面(作为iframe页面的src源,这个页面我命名为iframe.html).两个页面的内容分别如下: test.html: <!DOCTYPE html> <html> <h

JSP页面中引入另一个JSP页面

一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bottom固定的时候可以用这种方式 原文地址:https://www.cnblogs.com/suhfj-825/p/8214929.html

Vue.js如何在一个页面调用另一个同级页面的方法

使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关系,看了一下vue的API发现可以用这个方法实现. https://cn.vuejs.org/v2/api/#vm-on 在项目中实现: 1.首先同一个vue实例来调用两个方法.所以可以建立一个中转站. 建立 util.js 中转站文件(任意位置,我是在/assets/js/util.js) imp

关于jq将一个页面引入另一个页面,类似与组件化的解决方案

使用iframe标签, <iframe id="tab-4" style="height: 80vh" name="tab-4" marginwidth=0 marginheight=0 width=100% src="../commomFile/guarInfo.html" frameborder=0></iframe> iframe在需要引入html文件的html文件中, 被引入的文件guarInf

一个Web页面的问题分析

一个Web页面的问题分析 几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更可维护的代码,就是这篇文章要阐述的内容. 首先我查看了该Web页面的HTML代码,发现了一些典型的问题: HTML页面中包含了很多Javascript和CSS代码 HTML页面中引用了大量的外部Javascript文件和CSS文件 接下来就这些问题,我们逐个讨论一下: HTML页面中包含了很多Jav

【百度图表】页面引入多个图表,让其只适应

[百度图表]页面引入多个图表,让其只适应 网上发现有个这样的方法让图表自适应,window.onresize = myChart.resize; 但是发现好像只有最后一个有效,于是就有了下面的方法 就个数组保存myChart所有实例,然后每个都调用一下resize var charts = []; myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); charts.push(myCh

python--前端之CSS(css页面引入方法、选择器之基本选择器、组合选择器)

CSS产生背景: 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表. 有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. CSS基本语法及页面引用 CSS基本语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; pr

如何判断一个APP页面是原生的还是H5页面

来源:http://www.25xt.com/appdesign/11851.html Hybrid APP指的是半原生半Web的混合类App.需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web . 原生是Native APP,H5就是Web App 在Hybrid 当中,如何快速的判断一个APP页面是原生的还是H5页面呢? 1.看断网的情况 把手机的网络断掉.然后点开页面.然后可以正常显示的东西就是原生写的. 显示404或则错误页面的是htm

只用table模仿一个静态页面

尝试只用table标签来模仿一个静态页面,这样做可以很好的增加对网页结构理解. 要尝试模仿的页面如下: 附上我自己写的代码,因为只是用了HTML,没有用到CSS和js,所以有些样式写出来和原图有些出入 <!DOCTYPE html> <html> <head> <title>只用table来模仿一个网页</title> <meta charset="utf-8"> </head> <body>