Javascript 改变url地址 不跳转

如果不使用html5是没有办法实现的,但是我们可以使用hash来实现类似的功能。

首先说一下我想要实现的:

在一个页面点击一个连接,然后打开新页面,并根据url的参数调用相应的js方法,打开一个Extjs中的panel或者window。

很多人觉得没必要改变url但是不跳转,这里我说一样需要这么做的原因,因为打开新的页面后地址有参数了,如果点击刷新按钮,则一定会再次调用js的方法,我们不希望这么做,在页面打开并调用js方法完成后把参数清空,防止刷新是再次调用js方法。

如果不使用html5是不能实现的,也是出于安全考虑,所以如果要实现和我描述的类似的功能,可以使用hash实现类似效果。

 

1、首先,修改要打开的url:

比如以前的url为:

http://liuchang:8080/cas/login?a=action&c=java&r=123

我们修改为:

http://liuchang:8080/cas/login#a=action&c=java&r=123

2、然后再新打开的页面获取 “#” 后面的参数:

js获取url参数:

JavaScript 获取URL参数

我们需要对这个方法做一下修改:

/**
 * 参数
 * @type {Object}
 */
var Param = {
    // 获取所有参数,返回Object类型,然后根据参数名获取对应的参数值
    urlArgs :function(){
        var url = location.hash; // 参数
            str = '',
            params = {};
             
        if(url.indexOf('#') != -1){
            str = url.substr(1);
        }else{
            return null;
        }
        strs = str.split('&');
        for(var i = 0; i < strs.length; i++){
            var sub = strs[i].split('=');
            params[sub[0]] = unescape(sub[1]);
        }
        return params;
    }
}

到此我们已经取到我们想要的参数了,接下来就可以做其他的操作了。

 

3、重置url,也就是要删除参数,防止刷新时调用js:

location.hash = "";	// 重新设置url

换种思路也可以解决问题。需要的同学可以试一下这种方式。

声明一点:IE下,在新打开窗口中不支持特殊符号的hash。firefox和chrome测试没问题。

发表评论