在html页面中引入另一个html页面
2021-01-15 01:13
标签：data top meta 重要 ext 很多 title strong fun 我们在使用html编写一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。 在这里，有好几种引入html文件的方式，不过每种都是有利有弊，需要根据需要自行选择 如果有些浏览器本地实现不了，那么放到服务器上面！（重要！！！） 注意：引入后主页面的Css样式不适用于被引入页面，比如在主页面设置 下面介绍几种实现方法： href链接引入的html文件，id可以看做页面引导，在script中用到 相当于把引入的html中head和body标签中的数据拖出来，在外面包了一个你自己写的标签，比如说上面代码中的{
margin: 0;
padding: 0;
}
一、import引入(中引入文件，
head>
meta charset="utf-8" />
title>主页面title>
link rel="import" href="top.html" id="page1"/>
link rel="import" href="fotter.html" id="page2"/>
head>
script type="text/javascript">
document.write(page1.import.body.innerHTML);
script>
hello world！
script type="text/javascript">
document.write(page2.import.body.innerHTML);
script>
二、通过JQuery的load()方法加载页面
div class="top">topdiv>
div class="center">
p>你好，我在中间！p>
div>
div class="footer">footerdiv>
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>
三、object引入和iframe引入（带有滚动条，视情况使用）
object style="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px">object>
iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no"
文章标题：在html页面中引入另一个html页面
文章链接：http://soscw.com/index.php/essay/42034.html