- 浏览: 13612159 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
JS 获取链接(url)参数以及锚链接(anchor)结合富ajax的应用(ajax前进/后退的问题)
1. JavaScript获取url链接的方法:
<script language="javascript">document.write(window.location.href ); </script>
格式为 http://127.0.0.1/index.php?c=index&name=top#mao
<script language="javascript">document.write(window.location.protocol);</script>
格式为 http:
<script language="javascript">document.write(window.location.host);</script>
格式为 127.0.0.1
<script language="javascript">document.write(window.location.port);</script>
这里返回的是端口号,默认如果是80的话,则返回空值,如果是其他端口,则返回相应端口号
<script language="javascript">document.write(window.location.pathname);</script>
格式为 /index.php
<script language="javascript">document.write(window.location.search);</script>
格式为 ?c=index&name=top#mao 也就是说获取了动态语言赋值,也就是查询参数部分
<script language="javascript">document.write(window.location.hash);</script>
格式为 #mao 这里就获取了锚点的名称
这些获取浏览器地址栏上面的url的方法是非常有用的,可以制作锚链接(在有些系统里面,直接在A标签里加不行的话可以使用这个,同时也可以使用在Zencart的产品详细页面,做锚链接是非常容易的)。
2. JavaScript获取参数:
<script type="text/javascript"> function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href.indexOf("?")==-1 || location.href.indexOf(name+'=')==-1) return ''; // 获取链接中参数部分 var queryString = location.href.substring(location.href.indexOf("?")+1); // 分离参数对 ?key=value&key2=value2 var parameters = queryString.split("&"); var pos, paraName, paraValue; for(var i=0; i<parameters.length; i++) { // 获取等号位置 pos = parameters[i].indexOf('='); if(pos == -1) { continue; } // 获取name 和 value paraName = parameters[i].substring(0, pos); paraValue = parameters[i].substring(pos + 1); // 如果查询的name等于当前name,就返回当前值,同时,将链接中的+号还原成空格 if(paraName == name) return unescape(paraValue.replace(/\+/g, " ")); } return ''; }; //http://localhost/test.html?aa=bb&test=cc+dd&ee=ff alert(getQueryString('test')); //--> </script>
或者:
<script type="text/javascript"> function getQueryStringRegExp(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i"); if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " ")); return ""; }; //http://localhost/test.html?aa=bb&test=cc+dd&ee=ff alert(getQueryStringRegExp('test')); </script>
3. JavaScript 锚链接(anchor)结合富ajax的应用:
锚链接非常有用,因为他实现了页面不刷新就可以更新数据,之所以称其为富ajax,是因为他除了拥有类似ajax的用途(不刷新即实现更新数据),还拥有一个ajax没有的功能: 更改url地址,便于用户保存页面。 思路如下:
打开页面,获取location.hash也就是定位锚的值例如#/page/30,值的形式可以自己定(像urlrewrite那样)。获取之后处理分析,我这里是分成 page 和 30 作为两个参数通过ajax传递给php程序处理返回结果,然后修改到网页上。如果值为空就显示首页数据。
但是有一个问题就会出现:前进/后退按钮的问题,因为url改变,所以至少前进/后退按钮有历史记录,可惜的是点击之后只是地址栏url改变,页面并不刷新。
解决方案:
前进/后退按钮点击之后,url是变化了,可惜定位锚的变化浏览器不会刷新页面,那么这时候,只需要绑定hashchange事件就行了,也就是说每当定位锚变化的时候就触发一个事件。
我们可以使用以下三个插件:
jQuery hashchange event
: 直接绑定事件到window.onhashchange,并支持首次载入可以手动加载。使用简单。(目前我正在使用的就是这个。)
jQuery History
: 和上面的一样也是绑定事件到window.onhashchange,而且多了几个方法,比如修改url的定位锚,修改href里面的定位锚值等等。(注意,jQuery官网也有一个叫做jQuery history但是不一样的插件,注意区分)。(我没选择这个是因为其js文件比上面的大了一点)
jQuery History Plugin
:注意区分,比上面名称多了一个plugin。这款插件,其实是另外一种用法:比如人间网虽然也是AJAX网站,也支持前进/后退,但是它url不改变。所以对于那些url不改变,但是需要支持前进/后退按钮的话,这款插件是不错的选择。其原理和上面不同,把操作放入堆栈,并且通过一个隐藏的iframe页面来产生前进/后退历史(url不改变的话,按钮是没历史记录的),加入了一个iframe隐藏页面之后,相同url也能产生记录了,具体原理可以去看作者说明。
最后,因为每次定位锚改变就能触发事件,所以<a href="#/page/30">gallery 30</a>不需要再使用onclick事件了,点击之后url定位锚变化了,自然就触发了上面hashchange事件,然后我把数据调用在这里面完成就搞定了。从此可以和普通网站那样写链接做页面了。另外,由于定位锚被当成不同页面链接用了,其原来用来定位的功能我们可以通过自行修改其偏移值来实现,上下滚动反而更柔滑:
$(function(){ $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000); return false; } } }); });
- jquery.hashchange_.zip (6.3 KB)
- 下载次数: 59
- jquery-history-v1.5.0-final-0-g35d2afd.zip (117.8 KB)
- 下载次数: 20
- jQuery_History_Plugin.zip (29 KB)
- 下载次数: 10
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1161使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2244当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1165参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 999在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 927从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1535先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3285每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1188原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4443出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1324一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1548一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 813域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2257代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 701代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1582插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 496上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1172javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3561寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1092AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 678AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
本文介绍了一个非常健全的用 Javascript 写的链接(URL)解析类,他可以准确获取一个完整的 URL 中每个部分的内容,包括协议、URL中包含的用户名和密码、主机名、端口、路径名、参数、锚点(Fragment Anchor)等...
生成 GitHub 锚 URL(页内链接)。 使用安装 npm i stringify-github-anchor --save 用法 var githubAnchorUrl = require ( 'stringify-github-anchor' ) ; githubAnchor ( { user : 'foo' , repo : 'bar' , file ...
anchor.js 是简单且有用的 jQuery 插件,为所有本地链接提供一个平滑的动画,然后跳转到页面的任意一个元素。在线演示 标签:anchor
前端项目-anchor-js,一个用于向在线文档添加深度锚链接的jawscript实用程序。
锚 :anchor: Anchor是Solana 运行时的框架,提供了几个方便的开发人员工具。 Rust eDSL用于编写Solana程序 规格 用于从IDL生成客户端的TypeScript包 CLI和工作区管理,用于开发完整的应用程序 如果你熟悉复仇的...
anchor-scroll, 平滑和轻量的锚定滚动库 锚滚动库用于动画链接的简单 1KB 插件。 视图演示插件。用法在页面中插入 scroll.min.js 。将 scroll 类添加到锚点中。<a >Intro&l
将此组件添加到与您的 queryParams 可能所在的控制器或路由相对应的模板中,将要用作“锚”参数的 queryParam 作为属性a传递给组件。 应用程序/模板/application.hbs {{ ember-anchor a = anc }} 在您的控制器上...
添加锚链接(WordPress插件) 就像Github在Readme.md文件中所做的那样,在所选帖子的内容中创建指向标题标签的锚链接。未发布的更改没有任何路线图将ID直接添加到标题使用更少的代码来添加链接开发人员功能手动运行...
anchor1.Target="_Blank"; anchor1.Title="新浪网"; anchor2.HRef = "http://www.sohu.com"; anchor2.Target="_Blank"; anchor2.Title="搜狐网"; anchor3.HRef = "http://www.263.com"; anchor3.Target=...
前端开源库-anchor锚,node.js的高级验证库(用于水线)
jquery.anchorScroll.js是一款可以制作页面锚链接平滑过渡效果的jQuery插件。该插件属于轻量级插件,简单易用,内置模糊和弹性特效,并提供回调函数共开发者使用。
一个JavaScript实用程序,用于向现有页面内容添加深锚链接()。 AnchorJS是轻量级的,可访问的并且没有依赖项。 。 安装 使用npm下载AnchorJS, npm install anchor-js ...然后将其包含到您的项目中: import ...
您的笔记是针对您自己的,以及您做笔记时所处的页面。 拜托一位朋友,想向他们展示您的食谱更改吗? 如果他们也有Anchor Notes,只需使用您的凭据登录其Chrome浏览器,然后访问该食谱页面。 您的笔记将在那里! 即使...
将标题添加到标题 ...此扩展程序尝试通过以“哈希”符号“#”的形式向页面的每个标题添加锚链接来解决该问题-您可以单击它,然后从浏览器的地址栏中复制完整的URL或使用上下文菜单直接复制链接。 支持语言:English
其实这段代码在之前的 “ 用 Javascript 实现锚点(Anchor)间平滑跳转” 一文已经介绍过了,但是由于这个需求并且经常用到,因此,本站专门发布此文介绍,方便查阅。 代码如下:[removed] // 说明:用 Javascript 获取...
降价锚 页眉锚点。 英文| 用法 const md = require ( 'markdown-it' ) ( ) . use ( require ( 'markdown-it-anchor' ) , opts ) 看到一个 。... 在标题文本和永久链接锚之间放置空格。 true pe
得到锚 通过href和可选获取锚点。 安装 $ npm install get-anchor 用法 const getAnchor = require ( 'get-anchor' ) // create an anchor on the DOM const anchorEl = document . createElement ( 'a' ) ...
React锚 使用React组件检测文本中的URL和电子邮件,并将它们转换为可单击HTML链接。 :rocket: 安装 # npm npm i react-anchorme # Yarn yarn add react-...您可以设置应用于组件创建的每个链接的自定义锚Struts