最近做一个新的项目，项目页头，导航，页尾是不变的，只有中间部分是通过加载其他页面，达到内容刷新的。

大概结构如下，

要求，

1. 正文部分可以通过加载一个页面达到刷新效果

2. 保留加载的页面 url，即刷新整个页面时，正文还停留在当前页面

Logo Title
导航栏 正文部分
Footer

页面局部刷新可以有很多方法，但是考虑到 url 跟随正文部分更改，办法就非常有限了

1. 采用 angularjs 的路由功能，但是前端有需要维护 url 路径，有点太麻烦。

2. 最后想到可以用 锚点类的方法，保存正文部分状态，并且主页面只需加载一次即可

然后基于 admin-lte 的模板，做了简单的布局设计。

改完之后感觉效果太爽了，原理不多说，直接看源码吧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>主页面框架</title>

    <script type="text/javascript" src="../js-lib/jquery/jquery-1.11.2.js"></script>

    <!-- load mask -->
    <link rel="stylesheet" type="text/css" href="../js-lib/jquery-loadmask/jquery.loadmask.css" />
    <script type="text/javascript" src="../js-lib/jquery-loadmask/jquery.loadmask.min.js"></script>

    <!--[if lt IE 9]>
    <script src="../js-lib/html5/html5shiv.min.js"></script>
    <script src="../js-lib/html5/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        /** 页面默认样式 **/
        html, body{
            padding: 0;
            margin: 0;
            height: 100%;
        }

        /** 框架 table 样式 **/
        .main-frame-tab{
            border-spacing: 0;
            border-collapse: collapse;
        }
        .main-frame-tab td{
            border: 0px solid #FF0000;
        }

    </style>

    <script type="text/javascript">

        /** 锚点定位 **/
        function scrollAnchor(anchorName){
            var currentUrl = window.location.href;

            //第二个#后面的才是需要定位的锚点
            //去掉第二个#后面的部分
            var trueBaseUrl = currentUrl;
            //第一个#
            var firstIndex = currentUrl.indexOf("#");

            if(firstIndex < 0){
                trueBaseUrl = currentUrl + "#";
            }else{
                //第二个#
                var secondIndex = currentUrl.indexOf("#", firstIndex + 1);
                if(secondIndex >= 0){
                trueBaseUrl = currentUrl.substring(0, secondIndex);
                }
            }
            var anchorUrl = trueBaseUrl + "#" + anchorName;

            window.location.href = anchorUrl;
            var anchorDom = document.getElementById(anchorName);
            if(anchorDom){
                anchorDom.scrollIntoView();
            }
        }

        /** 加载 rul 内容 **/
        function changeUrl(urlAddr) {
            document.body.scrollTop = 0;

            var currentUrl = window.location.href;

            //第一个#
            var firstIndex = currentUrl.indexOf("#");

            if (firstIndex > 0) {
                currentUrl = currentUrl.substring(0, firstIndex);
            }

            window.location.href = currentUrl + "#" + urlAddr;

            $("#main-content-wrapper").mask("load...");

            $("#main-content-wrapper").load(urlAddr, null, function (responseText, status, xmlRequest) {
                if (status == "success") {

                } else {
                    $(this).html(responseText);
                }
                $("body").unmask();

                //第二个#，锚点判断
                var secondIndex = urlAddr.indexOf("#");
                if(secondIndex > 0){
                    var anchorName = urlAddr.substr(secondIndex + 1);

                    scrollAnchor(anchorName);
                }

            });
        }

        /** 初始化页面时加载url **/
        function loadActUrl(){
            var trueUrl = window.location.href;

            var index = trueUrl.indexOf("#");

            if(index > 0) {
                var actUrl = trueUrl.substr(index + 1);

                changeUrl(actUrl);
            }
        }

        $(function(){
            loadActUrl();
        });

    </script>
</head>
<body>
    <table style="min-height: 100%; width: 100%; min-width: 1024px;" class="main-frame-tab">
        <tr style="height: 50px;">
            <td style="background-color: #367FA9; width: 230px;">Logo</td>
            <td style="background-color: #3C8DBC;">Title</td>
        </tr>
        <tr>
            <td style="background-color: #222D32; height: 100%; color: red; vertical-align: top;" rowspan="2">
                导航栏
                <br>
                <a href="javaScript:void(0)" onclick="changeUrl('test.html')">导航测试</a>
                <br>
                <a href="javaScript:void(0)" onclick="changeUrl('test404.html')">导航测试404</a>
            </td>
            <td style="background-color: #ECF0F5; vertical-align: top;">
                <div id="main-content-wrapper" style="min-height: 200px;">
                    <h1>正文内容</h1>
                </div>
            </td>
        </tr>
        <tr style="height: 50px;">
            <td>
                <div style="text-align: center;">Footer</div>
            </td>
        </tr>
    </table>

</body>
</html>

虽然说不推荐使用 table 布局，因为 table 布局可能不是特别好控制，但是在此处正好使用了 table 的特性才实现了高度正好 100% ，因此合适的方案使用在合适的地方，就是好的方案，赶快试试吧。

jquery 动态载入页面，并且保证 url 变动的更多相关文章

  1. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  2. jquey学习2之jquery动态添加页面片段

    第一个方法:append()方法 [1]$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示. <html> < ...

  3. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  4. [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

  5. js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值

    js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jque ...

  6. Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值

      在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果 ...

  7. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

  8. Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解

    大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...

  9. PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )

    /* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...

随机推荐

  1. 跟我学SpringCloud | 第十篇：服务网关Zuul高级篇

    SpringCloud系列教程 | 第十篇:服务网关Zuul高级篇 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 如无特殊说明,本系列教程全 ...

  2. 职业生涯之完成OCM考试后的感想

    背景知识:关于OCM认证,百科是这样描述的: Oracle Certified Master(OCM) 大师认证资质是Oracle认证的最高级别.此认证是对技术.知识和操作技能的最高级别的认可.Ora ...

  3. 关于过两级mux的时序约束的添加（一个非常经典的时序约束问题）

    非常开心自己的微信公众号: <数字集成电路设计及EDA教程> 关注者超过了1700 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具 ...

  4. c++学习书籍推荐《深入理解C++11 C++11新特性解析与应用》下载

    百度云及其他网盘下载地址:点我 编辑推荐 <深入理解C++11:C++11新特性解析与应用>编辑推荐:C++标准委员会成员和IBM XL编译器中国开发团队共同撰写,权威性毋庸置疑.系统.深 ...

  5. .Net Core 学习依赖注入自定义Service

    1. 定义一个服务,包含一个方法 public class TextService { public string Print(string m) { return m; } } 2. 写一个扩展方法 ...

  6. 快速掌握mongoDB(二)——聚合管道和MapReduce

    上一节简单介绍了一下mongoDB的增删改查操作,这一节将介绍其聚合操作.我们在使用mysql.sqlserver时经常会用到一些聚合函数,如sum/avg/max/min/count等,mongoD ...

  7. MyBatis where、set、trim标签的用法

    <!-- 4.3.1 where用法 <where>标签的作用:如果该便签包含的元素中有返回值,就插入一个where:如果 where后面的字符串是一and或or开头的,就将它们剔除 ...

  8. Python 爬虫：煎蛋网妹子图

    使用 Headless Chrome 替代了 PhatomJS. 图片保存到指定文件夹中. import requests from bs4 import BeautifulSoup from sel ...

  9. 【HDU - 1043】Eight（反向bfs+康托展开）

    Eight Descriptions: 简单介绍一下八数码问题:在一个3×3的九宫格上,填有1~8八个数字,空余一个位置,例如下图: 1 2 3 4 5 6 7 8   在上图中,由于右下角位置是空的 ...

  10. 「PowerBI相关」一款极其优秀的DAX建模工具Tabular Editor

    做Excel插件开发的时间久了,大部分人的印象是笔者是做软件开发,谈不上软件,也是插件开发级别. 但笔者更希望大家记住的身份是做BI开发,特别是企业级的BI. 故也借着Excel催化剂这个平台,输送一 ...