jquery 动态载入页面，并且保证 url 变动

最新推荐文章于 2021-03-17 23:20:39 发布

cdmamata

最新推荐文章于 2021-03-17 23:20:39 发布

阅读量2.9k

点赞数

分类专栏： java-web 文章标签： jquery 动态页面加载 url

本文链接：https://blog.csdn.net/cdmamata/article/details/65447075

版权

项目中采用jQuery动态加载页面内容，保持URL变化，实现内容刷新。正文通过加载独立页面更新，同时刷新后仍能保持在当前页面。尝试了AngularJS路由但觉得维护URL繁琐，最终利用锚点实现，结合admin-lte模板完成布局，通过table布局实现高度100%的效果。代码实践分享。

摘要由CSDN通过智能技术生成

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

大概结构如下，

要求，

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

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

Logo	Title
导航栏	正文部分
导航栏	Footer

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

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

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cdmamata

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

web前端笔试题-完善版

JackieDYH的博客

08-08

1万+

web面试题 1、定位有哪几种？分别简述其特点。 static：默认值，没有定位，元素出现在正常的文档流中 relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位 absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位 fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位 2、请描述一下网页从开始请求到最终显示的完整过程 1.1在浏览器中输入地址 1.2发送到DNS服务器，解析获取域名对应的web服务器

html数字动画效果,数字滚动动画效果

weixin_31509753的博客

06-03

1105

最近弄智库，看见百度文库有个文档数的数字在页面加载完后会有个小动画，数字一直向上刷，给人的感觉是文档数量一直在不断的增加。看了下实现效果，自己模拟了下，还挺不错的，效果如下：智库已有文档,份说说原理吧，首先将数字按竖排的方式拼成CSS Sprite，然后定义好背景，通过JS改变背景的position的值，需要把数字和背景关联起来哦。因为数字是竖排的，所以在执行animate动画的时候，会有快有慢，...

参与评论您还未登录，请先登录后发表或查看评论

jq 获取引入页面url_jQuery加载外部站点页面

weixin_34125336的博客

01-12

665

手掌心您遇到跨域策略问题，原因是出于安全原因，AJAX不允许您从不在同一域中的页面上获取内容。要摆脱它并完成您的任务：您需要一个PHP文件，您可以grabber.php仅使用以下这行PHP 进行调用：比在您的html内部(或其他任何文件都可以：) test $(function(){ var contentURI= 'http://domain...

jQuery的loadmask插件

hqmln的博客

09-03

271

LoadMask jQuery插件用于当DOM元素加载或变化期间，对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果 1.调用mask(label,delay)方法屏蔽DOM元素 label一个文本字符串，显示在最外层的一个加载提示信息（在等待图片边上），如果此参数值为undefined，则只显示一个不带等待图标和文本提示的屏蔽层 delay以毫秒为单位的延迟...

UI前台加载等候插件

HarryChenj的专栏

11-06

930

前言： jQuery 框架来说肯定没有哪个有 jQuery 用得那么广泛的，尤其是 jQuery 的插件思想吸引了众多贡献者。常常见到这样的应用，点击按钮时显示一个遮罩层，“请稍候，正在处理中......”。应该有不少类似功能的插件，我现在所用的是 BlockUI 插件，还有一个叫做 LoadMask 的插件也能实现。据我相比较而言，觉得 BlockUI 插件要比 LoadMa...

页面加载遮盖插件LoadMark（如何调用jQuery插件学习第十一天）

weixin_42306620的博客

08-30

509

LoadMark是一款能够屏蔽DOM元素并显示加载提示的jQuery插件，它的主要功能是可以屏蔽指定元素中的内容区域。如该元素是一个提交数据的表单，那么只要执行该插件的mask()方法，在表单区域中将显示页面遮盖层和加载提示信息。此时，用户不能操作该表单中的任何元素，而表单的提交动作并不受影响。由于该插件具有这一特性，常用于表单提交，异步加载等耗时较长的操作中。此外，该插件体积很小，...

jquery的图片播放插件 - colorbox

[心从此刻开始]的专栏

10-16

1523

一. 什么是Colorbox ？ Jquery的一个轻量的，可自定义的 lightbox 插件。二. 为什么选择Colorbox? 支持图片，图片组，图片滑动观看，ajax,行内元素和iframe内容十分轻量，只有不到9KB大小外观可以通过CSS进行控制可以直接覆盖ColorBox的行为设置而不用改ColorBox的JS文件可以直接加上回调函数

Web

weixin_46274947的博客

03-17

225

JavaWeb web前端注意点 1. HTML是什么意思？答案：超文本标记语言 2. 什么是HTML5？答案： HTML5是最新的HTML标准 HTML5文档定义为：新增多媒体标签：video，audio 新标签：canvas，header，nav，footer等 3. 前端页面由哪三层构成，分别是什么？制作是什么？答案：结构层html用于定义网页布局和显示内容表示层css对html进行美化和修饰行为层js对html和css动态交互和控制 4. CSS引入的方式有哪些？答案：外部

JS覆盖当前整个网页 URL不变打开自定义的网址

L_melody的博客

12-27

2288

JS覆盖当前整个网页 URL不变打开自定义的网址 function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.match(/ip...

使用jquery获取url及url参数的方法

傲游码农的专栏qq:928758777

01-14

838

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1、jquery获取url很简单，代码如下： window.location.href; 其实只是用到了javascript的基础的window对象，并没有用jquery的知识。 2、jquery获取url参数比较复杂，要用到正则表达式，所以学好javascript正则式多么重要的事情首先看看单纯的通过

利用jQuery load 方法加载HTML公共页面,导航菜单自动选中

热门推荐

xiaogege2012的专栏

06-24

1万+

最近做了一个纯静态页面的网页，有一些页面的公共部分，不想重复在每一个html 中编写，想用 "header.html" --> ,发现引用不了，不起作用。后来知道，include是SSI（Server Side Include），在html中不支持include。查了下资料，看到jQuery的load方法可以引用其他html 页面，用了下，果然很方便。记录一下公共页面：h

jq 获取引入页面url_jQuery获取当前页面的URL信息

weixin_35411438的博客

12-30

270

在网站时不少客户要求导航条具有高亮功能，如果换到以前肯定是一个页面一个页面的去写代码，那样的话太麻烦，而且还不利于后期的维护和修改。不过现在有了jQuery了可以省去好多的事，再麻烦的事不就是一行JQ代码的事，如果解决不了，那就二行。window.locationjQuery中的window.location可以获取当前网页的URL地址，也可以通过不同参数获取不同的地址部份hash：设置或获取 h...

jQuery hashchange监听浏览器url变化

weixin_33943347的博客

08-04

3737

$(window).bind('hashchange', function() { // });

jq 获取引入页面url_jqURL获取页面URL及参数

weixin_42350544的博客

02-17

497

本文以实例讲述jqURL插件如何获取当前页面参数。查看演示下载资源：177次下载资源下载积分：30积分我们以demo页作为示例。若是demo页参数a为"undefined"，则跳转到http://www.sucaihuo.com/jquery/demo/56/?a=1&b=2&c=3。 var vars = $.jqUR...

jq 获取引入页面url_[开发笔记]-使用jquery获取url及url参数的方法

weixin_34308792的博客

12-30

406

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作1、jquery获取url很简单，代码如下：window.location.href;其实只是用到了javascript的基础的window对象，并没有用jquery的知识。2、jquery获取url参数比较复杂，要用到正则表达式，所以学好javascript正则式多么重要的事情首先看看单纯的通过javascript...

js,jqueryajax实现页面加载等待效果

rentian1的博客

08-17

8751

//获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var _LoadingTop = _PageH

使用 JavaScript 修改浏览器 URL 地址栏

不懂不懂

10-18

1358

英文原文：Manipulating Browser URLs Using JavaScript (Without Refreshing the Page) 来自： oschina 参与翻译(3人)：你要爪子, bigtiger02, szkiti 现在的浏览器里,有一个十分有趣的功能，你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史

动态页面：jQuery实现姓名搜索功能及代码示例

本篇文章主要介绍了如何使用jQuery实现动态文字搜索功能，以便在页面上列出的多行个人信息记录中进行姓名查找。作者首先明确了需求，即在包含教师姓名列的表格中添加一个搜索栏，用户可以根据姓名输入来筛选记录。 ...