MENU

HTML网页引用公共的头部和底部(亲测有效的三种方法)

• August 26, 2020 • Read: 257 • 经验教程

HTML静态页面引用公共的头部和底部

方法一:

通过load()函数,分别引入公共头部和底部文件;

header.html 顶部页面

<!DOCTYPE html>
<html>
    <head>
        <link href="./header.css" rel="stylesheet">
    </head>
    <body>
       <div class="header">
           <h4>头部</h4>
       </div>
   </body>
</html>

footer.html 底部页面

<!DOCTYPE html>
<html>
    <head></head>
    <body>
       <div class="footer">
           <h4>这里是底部</h4>
       </div>
   </body>
</html>

index.html 正文页面

<!DOCTYPE html>
<head></head>
<body>
    <!-- 顶部导航 -->
    <div class="headerpage"></div>
    <!--顶部导航 over-->    

    <!--中部主体--> 
        <p>正文部分</p>
    <!--中部主体 over-->  

    <!--footer-->  
    <div class="footerpage"></div>
    <!--footer over-->
    <script src="/js/jquery-3.4.1.min.js"></script>/*引用或下载官网最新js代码*/
    <script>
        $(function(){
            /*公共部分
            * 导航栏
            * footer CopyRight
            */
            // $(".headerpage").load("load/header.html");/*浏览器容易引起跨域问题*/
            $(".headerpage").load('http://www.load.com/header.html');
            $(".footerpage").load("http://www.load.com/footer.html");
        });
    </script>
</body>
</html>

注意:load函数里最好不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,我这里是用域名来解决的。

方法二:

引用<object>来实现

<object type="text/x-scriptlet" data="header.html" width=100% height=30></object>

方法三:

HTML5 中的 <embed> 标签

<embed type="text/html" src="header.html" />

小维认为方法一在HTML静态页面中的使用是最合适不过的哦。

注意:方法二和方法三必须设置宽和高,高必须固定,设置auto会出现页面显示不完整的情况。(亲测方法三会出现滚动条)

这里不提iframe,主要因为设计网页相对比较困难,占用线程较多,速度慢,而且也不利于搜索引擎的对头尾的收录。

HTML网页引用公共的头部和底部(亲测有效的三种方法) - 原文链接:http://blog.isww.cn/archives/309/

Last Modified: June 24, 2021
Archives QR Code Tip
QR Code for this page
Tipping QR Code