3 Nov

HTML引用公共页面

by 吕进 at 13:59 under 默认分类 不指定 | |
1、iFrame方法,但iFrame的方式缺点在于页面结构的杂乱、不易被搜索引擎搜索、导航链接等等问题,因此,大家普遍寻找其他的替代方法;
2、jquery - load方法(内部ajax+html):个人认为做好用。
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!--放一个id为footer的div,把footer.html加载到这块-->
        <div id="footer"></div>

        <!--利用jquery的load()方法把header.html和footer.html加载进来     -->
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            $(function() {
                $('#header').load('common/header.html');
                $('#footer').load('common/footer.html');
            })
        </script>
    </body>
</html>

重要代码:

<script src="jquery.min.js"></script>
<script>
/*导入头部和尾部*/
$(document).ready(function(){
   $(".footer").load("page/footer.html");
});
</script>


注意:footer.html不需要是完整的HTML,如
<!--footer.html页面-->
<footer>
   <ul class="g-flex">
      <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
   </ul>
</footer>
  • 中查看更多“HTML引用公共页面 ”相关内容
  • 中查看更多“HTML引用公共页面 ”相关内容
  • 中查看更多“HTML引用公共页面 ”相关内容
  • 中查看更多“HTML引用公共页面 ”相关内容
  • 分享到: 微信 更多
    发表评论
    表情
    emotemotemotemotemot
    emotemotemotemotemot
    emotemotemotemotemot
    emotemotemotemotemot
    emotemotemotemotemot
    打开HTML
    打开UBB
    打开表情
    隐藏
    记住我
    昵称   密码   游客无需密码
    网址   电邮   [注册]