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

大概结构如下，

要求，

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. python爬取拉勾网数据并进行数据可视化

    爬取拉勾网关于python职位相关的数据信息,并将爬取的数据已csv各式存入文件,然后对csv文件相关字段的数据进行清洗,并对数据可视化展示,包括柱状图展示.直方图展示.词云展示等并根据可视化的数据做 ...

  2. Ceph原理动画演示

    动图生动刻画Ceph的基本原理之集群搭建及数据写入流程:)

  3. python数据库-数据库的介绍及安装(47)

    一.数据库的介绍 数据库(Database)是存储与管理数据的软件系统,就像一个存入数据的物流仓库.每个数据库都有一个或多个不同的API接口用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数 ...

  4. C++ 洛谷 P2704 [NOI2001]炮兵阵地

    P2704 [NOI2001]炮兵阵地 没学状压DP的看一下 此题意思很简单,如下图,就是十字架上的不能有两个点放炮兵. 在做此题前,先做一下玉米田 玉米田题解 分析: 而m即一行的个数小于等于10, ...

  5. C++ 洛谷 P2458 [SDOI2006]保安站岗 from_树形DP

    P2458 [SDOI2006]保安站岗 没学树形DP的,看一下. 题目大意:一棵树有N个节点,现在需要将所有节点都看守住,如果我们选择了节点i,那么节点i本身,节点i的父亲和儿子都会被看守住. 每个 ...

  6. WebSocket API 学习笔记

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...

  7. Codeforces 755E：PolandBall and White-Red graph（构造+思维）

    http://codeforces.com/contest/755/problem/E 题意:给出n个点和一个距离d,让你在这个n个点的图里面构造一个子图,使得这个子图的直径和补图的直径的较小值为d, ...

  8. Java 7 源码学习系列（二）——Enum

    Enum Enum类是java.lang包中一个类,他是Java语言中所有枚举类型的公共基类. 一.定义 public abstract class Enum<E extends Enum< ...

  9. 一台服务器通过nginx配置多个域名（80端口）

    1. 问题描述 多个域名对应一个服务器,为了避免域名后增加端口号,两个域名都需要占用80端口号,使用nginx来进行配置. 2. 解决方案 目前项目中,线上正在使用(100%可用)多域名对应一个服务器 ...

  10. motion做摄像头（ZC3XX）移动物体监控系列问题

    一:插入摄像头USB没有显示 gspca: video x creat 解决:cd /dev            ls |grep video 进入/dev目录下,运行ls |grep video命 ...