`
天梯梦
  • 浏览: 13612159 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

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;
            }
        }
    });
});

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    用Javascript正则实现url链接的解析类

    本文介绍了一个非常健全的用 Javascript 写的链接(URL)解析类,他可以准确获取一个完整的 URL 中每个部分的内容,包括协议、URL中包含的用户名和密码、主机名、端口、路径名、参数、锚点(Fragment Anchor)等...

    stringify-github-anchor:生成 GitHub 锚 URL(页内链接)

    生成 GitHub 锚 URL(页内链接)。 使用安装 npm i stringify-github-anchor --save 用法 var githubAnchorUrl = require ( 'stringify-github-anchor' ) ; githubAnchor ( { user : 'foo' , repo : 'bar' , file ...

    jQuery链接跳转动画anchor.js.zip

    anchor.js 是简单且有用的 jQuery 插件,为所有本地链接提供一个平滑的动画,然后跳转到页面的任意一个元素。在线演示 标签:anchor

    前端项目-anchor-js.zip

    前端项目-anchor-js,一个用于向在线文档添加深度锚链接的jawscript实用程序。

    锚::anchor:Solana海平面框架

    锚 :anchor: Anchor是Solana 运行时的框架,提供了几个方便的开发人员工具。 Rust eDSL用于编写Solana程序 规格 用于从IDL生成客户端的TypeScript包 CLI和工作区管理,用于开发完整的应用程序 如果你熟悉复仇的...

    anchor-scroll, 平滑和轻量的锚定滚动库.zip

    anchor-scroll, 平滑和轻量的锚定滚动库 锚滚动库用于动画链接的简单 1KB 插件。 视图演示插件。用法在页面中插入 scroll.min.js 。将 scroll 类添加到锚点中。&lt;a &gt;Intro&l

    ember-anchor:在 ember.js 应用程序中支持 #anchor 之类的构造

    将此组件添加到与您的 queryParams 可能所在的控制器或路由相对应的模板中,将要用作“锚”参数的 queryParam 作为属性a传递给组件。 应用程序/模板/application.hbs {{ ember-anchor a = anc }} 在您的控制器上...

    add-anchor-links:添加锚链接(WordPress插件)

    添加锚链接(WordPress插件) 就像Github在Readme.md文件中所做的那样,在所选帖子的内容中创建指向标题标签的锚链接。未发布的更改没有任何路线图将ID直接添加到标题使用更少的代码来添加链接开发人员功能手动运行...

    ASP.NET时尚编程百例(实例03)

    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

    前端开源库-anchor锚,node.js的高级验证库(用于水线)

    jqueryanchorScrolljs是一款可以制作页面锚链接平滑过渡效果的jQuery插件

    jquery.anchorScroll.js是一款可以制作页面锚链接平滑过渡效果的jQuery插件。该插件属于轻量级插件,简单易用,内置模糊和弹性特效,并提供回调函数共开发者使用。

    anchorjs:将深锚链接添加到您的文档

    一个JavaScript实用程序,用于向现有页面内容添加深锚链接()。 AnchorJS是轻量级的,可访问的并且没有依赖项。 。 安装 使用npm下载AnchorJS, npm install anchor-js ...然后将其包含到您的项目中: import ...

    锚笔记「Anchor Notes」-crx插件

    您的笔记是针对您自己的,以及您做笔记时所处的页面。 拜托一位朋友,想向他们展示您的食谱更改吗? 如果他们也有Anchor Notes,只需使用您的凭据登录其Chrome浏览器,然后访问该食谱页面。 您的笔记将在那里! 即使...

    锚标题「Anchor headings」-crx插件

    将标题添加到标题 ...此扩展程序尝试通过以“哈希”符号“#”的形式向页面的每个标题添加锚链接来解决该问题-您可以单击它,然后从浏览器的地址栏中复制完整的URL或使用上下文菜单直接复制链接。 支持语言:English

    Javascript 获取滚动条位置等信息的函数

    其实这段代码在之前的 “ 用 Javascript 实现锚点(Anchor)间平滑跳转” 一文已经介绍过了,但是由于这个需求并且经常用到,因此,本站专门发布此文介绍,方便查阅。 代码如下:[removed] // 说明:用 Javascript 获取...

    markdown-it-anchor:markdown-it的页眉锚点

    降价锚 页眉锚点。 英文| 用法 const md = require ( 'markdown-it' ) ( ) . use ( require ( 'markdown-it-anchor' ) , opts ) 看到一个 。... 在标题文本和永久链接锚之间放置空格。 true pe

    get-anchor:通过href和可选查询获取锚点

    得到锚 通过href和可选获取锚点。 安装 $ npm install get-anchor 用法 const getAnchor = require ( 'get-anchor' ) // create an anchor on the DOM const anchorEl = document . createElement ( 'a' ) ...

    react-anchorme::anchor:使用Anchorme.js的React组件检测文本中的URL和电子邮件,并将它们转换为可点击HTML链接

    React锚 使用React组件检测文本中的URL和电子邮件,并将它们转换为可单击HTML链接。 :rocket: 安装 # npm npm i react-anchorme # Yarn yarn add react-...您可以设置应用于组件创建的每个链接的自定义锚Struts

Global site tag (gtag.js) - Google Analytics