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

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

Kevinvcc200

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

阅读量385

点赞数

分类专栏： jquery

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

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

以例子来演示：

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

<!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 center;
       background-size: 30px 30px;
       padding-left: 35px;
   }
   #header .headnav{
       float: right;
   }
   #header .headnav ul li{
       float: left;
       width: 80px;
       margin-left: 10px;
   }
   #header .headnav ul li a{
       text-decoration: none;
       color: #fff;
   }
   </style>
</head>
<body>
   <div id="header">
       <div class="logo">悟空音乐</div>
       <div class="headnav">
           <ul>
               <li><a href="header.html">nav one</a></li>
               <li><a href="javascript:;">nav two</a></li>
               <li><a href="javascript:;">nav three</a></li>
               <li><a href="javascript:;">nav four</a></li>
               <li><a href="javascript:;">nav five</a></li>
           </ul>
       </div>
   </div>
</body>
</html>

Kevinvcc200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用load提取页面公共内容因为浏览器跨域问题失效，使用iframe底部出现空白（推荐使用）

在做项目时，通常页面header部分是相同的，但如果复制粘贴，代码量很大而且很冗余，因此可以像vue一样可以将页面拆分成不同的组件，而header就是一个组件，可以单独提取出来，最后再把不同组件合并呈现不同的页面；但现在所有的主流浏览器都不支持，使用iframe来替换load吧！可以直接跳过以下load的演示：以例子来演示：刚开始想header.html到底光写body里面的元素，从c...
复制链接

扫一扫