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

大概结构如下，

要求，

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. Js笛卡尔乘积

    self.getDescartesSku = function (selSaleProp, i, nowLst, allALst) {         if (selSaleProp.length = ...

  2. 使用Python脚本伪造指定时间区间的数据库备份

    为监管需求,需要保留时间非常长的数据库备份.存储代价太大.所以存在了,临时抱佛脚,伪造备份.. 以下脚本功能,在于根据一个备份,复制出一段时间的备份.并且更改备份的文件时间戳.可以用shell轻松写出 ...

  3. spark入门（三）键值对操作

    1 简述 Spark为包含键值对类型的RDD提供了一些专有的操作.这些RDD被称为PairRDD. 2 创建PairRDD 2.1 在sprk中,很多存储键值对的数据在读取时直接返回由其键值对数据组成 ...

  4. HDU 5616：Jam's balance（背包DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=5616 题意:有n个物品,每个重量为w[i],有一个天平,你可以把物品放在天平的左边或者右边,接下来m个询问,问是 ...

  5. Intent对象（组件间的通信原理）

    Intent对象是一种可以在运行时动态绑定组件的关键技术,通过使用Intent对象,可以告诉系统你想要实现什么样的操作,也就是Intent对象里面包含的请求内容,请求再由Android操作系统接收到, ...

  6. Maven打包成Jar文件时依赖包的问题

    我们项目中使用到第三方的库文件,这些jar库文件并没有放到Maven中央库上,导致我们需要在项目中自己配置使用.我们的两三个开发人员对Java都是很熟,因此在使用中遇到了一些问题,表现在:在本地中引入 ...

  7. Spring 注解编程之注解属性别名与覆盖

    前两篇文章咱聊了深入了解了 Spring 注解编程一些原理,这篇文章我们关注注解属性方法,聊聊 Spring 为注解的带来的功能,属性别名与覆盖. 注解属性方法 在进入了解 Spring 注解属性功能 ...

  8. Vue快速学习_第三节

    过滤器 局部过滤器(组件内部使用的过滤器,跟django的很像, filters: {过滤器的名字: {function(val, a,b){}}} 全局过滤器(全局过滤器,只要过滤器一创建,在任何组 ...

  9. 雅阁微信群、雅阁车友群、十代雅阁交流微信QQ群

    最近一直在关注第十代雅阁,不论是普通汽油版本还是油电混动版本都很不错,在网上看到很多评测文章和视频 后续都会整理发布到微信群中. 由于论坛发帖,博客发文都不是很方便,为了及时沟通,先创建了微信群,方便 ...

  10. redis快速部署

    1. 场景描述 以前是直接使用公司提供的redis集群,只使用不负责维护,因项目用到负载均衡,需要使用redis做session共享,存储session信息,所以就部署了下,记录下以便后续能快速部署. ...