网页引入公共头部或底部的常用方法

chenrui310

已于 2022-12-27 16:49:21 修改

阅读量348

点赞数

分类专栏： html 文章标签： javascript 前端 ajax

于 2022-12-27 16:49:15 首次发布

原文链接：https://www.cnblogs.com/zyl-0110/p/15138033.html

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

网页引入公共头部或底部的常用方法

#JQuery方法

<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，跨域会报错。如果是本地文件测试，不要用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>