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

大概结构如下，

要求，

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. 【koa2基础框架封装】基于Proxy路由按需加载器和初始加载器

    我们在使用koa2做路由拦截后一般都习惯于直接将查找对应处理函数的过程映射到项目的文件夹目录,如: router.get('/test', app.controller.index.test); ap ...

  2. leadcode的Hot100系列--104. 二叉树的最大深度

    依然使用递归思想. 思路: 1.树的深度 = max (左子树深度,右子树深度)+ 1 . ------> 这里的加1是表示自己节点深度为1. 2.如果当前节点为null,则说明它的左右子树深度 ...

  3. 记一次linux通过jstack定位CPU使用过高问题或排查线上死锁问题

    一.java定位进程 在服务器中终端输入命令:top 可以看到进程ID,为5421的cpu这列100多了. 记下这个数字:5421 二.定位问题进程对应的线程 然后在服务器中终端输入命令:top -H ...

  4. Codeforces 757B：Bash's Big Day（分解因子+Hash）

    http://codeforces.com/problemset/problem/757/B 题意:给出n个数,求一个最大的集合并且这个集合中的元素gcd的结果不等于1. 思路:一开始把素数表打出来, ...

  5. 【题解】P1396 营救-C++

    原题传送门 这道题目基本就是一个克鲁斯卡尔最小生成树的模板题,唯一不同的是,这道题目的最终目标不是所有点相连,而是只要s和t相连就可以了.还有就是这道题目求的是最小生成树中的最大边权值.但是,克鲁斯卡 ...

  6. Mask-RCNN:教你如何制作自己的数据集进行像素级的目标检测

    概述 Mask-RCNN,是一个处于像素级别的目标检测手段.目标检测的发展主要历程大概是:RCNN,Fast-RCNN,Fster-RCNN,Darknet,YOLO,YOLOv2,YOLO3(参考目 ...

  7. WMI_COM_API

    Win32_Processor // CPU 处理器 Win32_PhysicalMemory // 物理内存 Win32_Keyboard // 键盘 Win32_PointingDevice // ...

  8. python 之 并发编程（线程理论，开启线程的两种方式，进程与线程的区别，线程对象的其他方法）

    9.9 线程理论 1.什么是线程 线程指的是一条流水线的工作过程 进程根本就不是一个执行单位,进程其实是一个资源单位,一个进程内自带一个线程,线程才是执行单位 2.进程VS线程 同一进程内的线程们共享 ...

  9. “朕赐给你，才是你的；朕不给，你不能抢”--custome role在Azure权限管理中的简单实践

    在开始详细讨论技术问题之前,有一些个人观点想发表一下: ---作为一个甲方云平台的掌控着,如果任何事情你都是让partner全部帮你搞定,自己既不审核也不研究,那无论是对于公司还是个人发展来说都是没任 ...

  10. Flutter学习笔记（10）--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...