你不睡,我不睡,你看我两多般配
果然程序猿和程序媛还是最般配的
如何实现多个.html静态页,引用同一个header.html 和footer.html 文件
方法一:
公共头文件
//不用写标准的html文档格式
<div>
头部内容
</div>
公共尾部文件:footer.html
//不用写标准的html文档格式
<div>
页脚内容
</div>
js文件:
当前方法:通过load()函数,引入公共头部和尾部文件;
代码预览:
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo演示</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over-->
<!--中部主体-->
<p>···代码省略···</p>
<!--中部主体 over-->
<!--footer-->
<div class="footerpage"></div>
<!--footer over-->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
/*公共部分
* 导航栏
* footer CopyRight
*/
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
});
</script>
</body>
</html>
在header.html和footer.html文件中,并非是标准的html文档格式!
与此同时,通过index.html中的jQuery函数load()将上述的两个公共文件引入进来,从而形成一个完整的页面;
并且,不会影响到其他页面对于公共文件的引用和使用;
问题:
解决方法:load函数里最好不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,我这里是用域名来解决的.
把本地文件部署到Tomcat也是可以找到的
方法二:实现
<object type="text/x-scriptlet" data="header.html" width=100% height=30></object>
方法三:HTML5 中的 标签
<embed type="text/html" src="header.html" />
顺便说一下
如何把他人的网站引入到自己的网页模块中
譬如:我想把我的csdn博客引入到我的网页中。
这里我使用了iframe标签
<iframe src="https://blog.csdn.net/qq_43009710" marginWidth=0 marginHeight=0 frameBorder=0 width=1200 height=800 scrolling="yes"></iframe>
我是乐乐呀,感谢您的阅读。如果您觉得不错,那就点个赞吧,您的支持是我最大的动力。谢谢😜
以上均是个人观点,有错的地方还请大家指正。感谢您阅读。