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

大概结构如下，

要求，

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. 浅入深出Vue：组件

    组件在 vue开发中是必不可少的一环,用好组件这把屠龙刀,就能解决不少问题. 组件是什么 官方的定义: 组件是可复用的 Vue 实例,并且可带有一个名字. 官方的定义已经非常简明了,组件就是一个实例. ...

  2. 浅说——树形DP

    啊!DP! 顾名思义,树形DP就是在树上所做的动态规划.我们一般所做的动态规划多是线性的,线性DP我们可以从前向后或从后向前两种方法,不妨类比一下,在树上我们同样可以有两种方法,从根向树叶或者从树叶向 ...

  3. c++ 函数知识点汇总

    c++ 函数知识点汇总 swap函数 交换两个数组元素 比如 swap(a[i],a[j]); 就是交换a[i] 和 a[j] 的值 strcpy() 复制一个数组元素的值到另一个数组元素里 strc ...

  4. 使用Gitlab-CI 实现NetCore项目Docker化并部署到阿里云K8S

    使用Gitlab-CI 实现NetCore项目Docker化并部署到阿里云K8S 先行条件: 1.了解NetCore项目基础命令,如dotnet publish   等几个常用命令. 2.了解Dock ...

  5. web应用分页

    1. 场景描述 目前大部分的应用程序中都会用到分页功能,以便减少前端浏览器及后台服务器的压力,以及其他方面的考虑. (1)分页从概念上可分为逻辑分页和物理分页,逻辑分页主要是通过应用程序(前端或者后端 ...

  6. SSAS 多维/表格设计模型--事实表与维表的关联

    表格设计模型中,同多维设计模型相似, 维表和事实表相互独立,通过关系数据库中的外键来联系,互相关联构成一个统一的架构. DB中外键是需要唯一性约束的,即A表某列建立主键或者唯一键后,B表才可以引用为外 ...

  7. bs4——BeautifulSoup模块：解析网页

    解析由requests模块请求到的网页 import requests from bs4 import BeautifulSoup headers = {'User-Agent': 'Mozilla/ ...

  8. DvaJS构建配置React项目与使用

    DvaJS构建配置React项目与使用 一,介绍与需求分析 1.1,介绍 dva 首先是一个基于redux 和redux-saga的数据流方案,然后为了简化开发体验,dva 还额外内置了react-r ...

  9. C#3.0新增功能09 LINQ 标准查询运算符 04 运算

    连载目录    [已更新最新开发文章,点击查看详细] 本篇主要介绍标准查询运算符的常用运算功能. 01 对数据排序 排序操作基于一个或多个属性对序列的元素进行排序. 第一个排序条件对元素执行主要排序. ...

  10. 我狠起来连自己都打---如何简单实现Azure resource自动打标签

    你是否还在为花费大量Azure Resource打标签而烦恼呢?你是否还在因为这样低效的重复劳动而痛苦呢? 在很长一段时间内,笔者既要做云架构调整,又要做日常系统维护,还要参与各种各样的项目,在这种情 ...