HTML静态页如何引入公共的头部和底部

最新推荐文章于 2023-08-12 15:30:45 发布

原创最新推荐文章于 2023-08-12 15:30:45 发布 · 1.7k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #web #js #vue #javascript

本文探讨了如何通过`load`方法加载外部HTML文件遇到的跨域问题，介绍了使用iframe作为解决方案，以及将HTML文件部署到服务器的重要性。两种方法的优缺点和适用场景详细说明了避免跨域错误的方法。

第一种就是用的jqery的 load 方法也是公认最好的方法

$("#header").load("page/header.html");

参考代码

<body>JavaScript
 <div id="header"></div>
 <div id="footer"></div>
 <script>
 $("#header").load("page/header.html");//load 方法参数是引入公共文件的路径
 $("#footer").load("page/footer.html");
 </script>
</body>

但是这个方法有个弊端就是会出现跨域
如果出现下面的报错信息就是出现了跨域问题

No 'Access-Control-Allow-Origin' header is present on the requested resource；

是因为load用的ajax，跨域会报错。如果是本地file测试，不要用webkit核心浏览器如chrome，否则要发布网站通过http协议访问

但是有解决办法

就是把公共的HTML文件放在服务器中就可以了
在公共文件中 html，head，body这种标签，要去掉

iframe 标签的方法
参考代码

<head>
</head>
<body>
 <div id="header">
 <iframe align="center" width="100%" height="170" src="header.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
 </div>
 <div id="fotter">
 <iframe align="center" width="100%" height="170" src="fotter.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
 </div>
</body>