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

最新推荐文章于 2024-05-21 14:28:42 发布

hello芳芳

最新推荐文章于 2024-05-21 14:28:42 发布

阅读量1.6k

点赞数

文章标签： html web js vue javascript

本文链接：https://blog.csdn.net/jyf_568/article/details/120320800

版权

第一种就是用的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>

src 就是引入文件地址
注意：
body{margin:0; padding:0;}
要去除默认样式要不然会有留白。
这两种就可以解决问题了其他的都太坑了

hello芳芳

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML静态页如何引入公共的头部和底部

第一种就是用的jqery的 load 方法也是公认最好的方法$("#header").load("page/header.html");参考代码<body>JavaScript <div id="header"></div> <div id="footer"></div> <script> $("#he...
复制链接

扫一扫