使用load提取页面公共内容因为浏览器跨域问题失效，使用iframe底部出现空白

最新推荐文章于 2022-09-17 19:25:08 发布

代码就酱写

最新推荐文章于 2022-09-17 19:25:08 发布

阅读量1.4k

点赞数

文章标签：如何将页面头部提取出来引入其他页面 jquery load iframe底部的空白如何去除

本文链接：https://blog.csdn.net/Naughty_Fairy/article/details/84031528

版权

为了解决页面头部重复代码问题，尝试将header抽取为独立HTML并用jQuery load方法引入，但遇到浏览器跨域限制。转向使用iframe解决此问题，但在实际应用中发现底部出现白色空白。通过设置iframe宽高及display属性，成功消除底部空白。

摘要由CSDN通过智能技术生成

在做项目时，通常页面header部分是相同的，但如果复制粘贴，代码量很大而且很冗余，因此可以像vue一样可以将页面拆分成不同的组件，而header就是一个组件，可以单独提取出来，最后再把不同组件合并呈现不同的页面；

但现在所有的主流浏览器都不支持，使用iframe来替换load吧！可以直接跳过以下load的演示：

以例子来演示：

刚开始想header.html到底光写body里面的元素，从class为header开始写还是先搭建html结构，后来想既然是html文件，不搭建html基本结构怎么知道是html文件，而且css也没有办法引入，总不能直接<style></style>或者<link>也得浏览器知道写的是什么

<!--header.html-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>header</title>	
	<link rel="stylesheet" href="reset.css">
	<style type="text/css">
	#header{
		height: 45px;
		line-height: 45px;
		background: #000;
		color: #fff;
		padding: 0 70px;
	}
	#header .logo{
		float: left;
		background: url(monkey.jpg) no-repeat left cente