精华内容
下载资源
问答
  • 替换地址栏的url
    2022-05-31 21:44:36

    1.获取地址栏参数

    /********
    接收地址栏参数
    **********/
    function GetQuery(key) {
        var search = location.search.slice(1); //得到get方式提交的查询字符串
        var arr = search.split("&");
        for (var i = 0; i < arr.length; i++) {
            var ar = arr[i].split("=");
            if (ar[0] == key) {
                if (unescape(ar[1]) == 'undefined') {
                    return "";
                } else {
                    return unescape(ar[1]);
                }
            }
        }
        return "";
    }

    2.修改地址栏参数

    /*
    * changeURLStatic 修改地址栏URL参数 不跳转
    *   @param name 参数名
    *   @param value 参数值
    *
    * */
    function changeURLStatic(name, value) {
        let url = location.href;
        let url2 = "";
        let reg = eval('/([\?|&]' + name + '=)[^&]*/gi');
        value = value.toString().replace(/(^\s*)|(\s*$)/g, "");  //移除首尾空格
        if (!value) {
             url2 = url.replace(reg, '');  //正则替换
        } else {
            if (url.match(reg)) {
                 url2 = url.replace(reg, '$1' + value);  //正则替换
            } else {
                 url2 = url + (url.indexOf('?') > -1 ? '&' : '?') + name + '=' + value;  //没有参数添加参数
            }
        }
        history.replaceState(null, null, url2);  //替换地址栏
    }

    更多相关内容
  • 现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,...
  • js 不刷新页面替换url地址栏里面的参数 原来地址栏是这样 ​​​​​​​history.replaceState(null,"",'/#/home'); // 在你需要改变的地方加入 就会变成这样(没有刷新页面)

    js 不刷新页面替换url地址栏里面的参数

    原来地址栏是这样

    
    if (window.history){
                        // 支持History API
                        history.replaceState(null,"",'/#/bkqy/resultQuery')
                    }

    就会变成这样(没有刷新页面)

    展开全文
  • JS 修改地址栏URL参数 不跳转

    千次阅读 2020-04-30 14:53:20
    let url = changeURLParam(location.href, name, value); // 修改 URL 参数 history.replaceState(null, null, url); // 替换地址栏不跳转

    使用 History.replaceState()

    replaceState() 方法使用 state objectstitle 和 URL 作为参数, 修改当前历史记录实体,如果你想更新当前的 state 对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

    语法

    history.replaceState(stateObj, title[, url]);

    参数

    • stateObj

            状态对象是一个 JavaScript 对象,它与传递给 replaceState 方法的历史记录实体相关联.

    • title

            ​​​​大部分浏览器忽略这个参数, 将来可能有用. 在此处传递空字符串应该可以防止将来对方法的更改。或者,您可以为该状态传递简短标题

    • url 可选

            历史记录实体的 URL. 新的 URL 跟当前的 URL 必须是同源; 否则 replaceState 抛出一个异常.

    Javascript代码: 

    /**
     * changeURLStatic 修改地址栏 URL参数 不跳转
     * @param name
     * @param value
     */
    function changeURLStatic(name, value) {
        let url = changeURLParam(location.href, name, value); // 修改 URL 参数
        history.replaceState(null, null, url);  // 替换地址栏
    }
    
    
    /**
     * changeURLParam 修改 URL 参数
     * @param url
     * @param name
     * @param value
     * @returns {string}
     */
    function changeURLParam(url, name, value) {
        let reg = eval('/([\?|&]' + name + '=)[^&]*/gi');
        value = value.toString().replace(/(^\s*)|(\s*$)/g, ""); // 移除首尾空格
        let url2;
        if (!value) { // remove
            url2 = url.replace(reg, '');
        } else {
            if (url.match(reg)) { // edit
                url2 = url.replace(reg, '$1' + value);
            } else { // add
                url2 = url + (url.indexOf('?') > -1 ? '&' : '?') + name + '=' + value;
            }
        }
        return url2;
    }
    

    应用示例

    参数存在示例:

    //当前页面地址
    index.php?m=p&a=index&classify_id=225&search=i

    //执行修改
    changeURLStatic('search', '99999');

    //修改后页面地址
    index.php?m=p&a=index&classify_id=225&search=99999

    参数不存在示例: 

    //当前页面地址
    index.php

    //执行修改
    changeURLStatic('m', 'Index');

    //修改后页面地址
    index.php?m=Index


    //执行修改
    changeURLStatic('search', '99999');

    //修改后页面地址
    index.php?m=Index&search=99999

    展开全文
  • 修改地址栏url,页面不刷新

    千次阅读 2020-08-30 16:01:57
    修改url,页面不刷新 如果懒得看下文 直接用下面的方法就行(浏览一下代码 应该知道改什么值的吧!!!) function navigation(id,value) { history.pushState("","",'view?id='+id+'&showtab='+value); } 1、...

    修改url,页面不刷新

    如果懒得看下文 直接用下面的方法就行(浏览一下代码 应该知道改什么值的吧!!!)

    function navigation(id,value) {
            history.pushState("","",'view?id='+id+'&showtab='+value);
        }
    

    1、设置锚点特性(以bootstrap中标签页的代码为例)

    <div>
    
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="home()">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="profile()">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" onclick="message()">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" onclick="setting()">Settings</a></li>
      </ul>
    
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">home</div>
        <div role="tabpanel" class="tab-pane" id="profile">profile</div>
        <div role="tabpanel" class="tab-pane" id="messages">message</div>
        <div role="tabpanel" class="tab-pane" id="settings">setting</div>
      </div>
    
    </div>
    

    js:

    index.js:
    var currenturl = window.location.href;
    if(currenturl.indexOf('#')< 1) {
        window.location.href = currenturl + '#home';
    } else {
        var hreftype = window.location.hash;//#后面的字段
        $("a[href="+hreftype+"]").click();//触发此a的点击事件
    }
    
    profile.js:
    var currenturl = window.location.href;
    if(currenturl.indexOf('#')< 1) {
        window.location.href = currenturl + '#home';
    } else {
        var hreftype = window.location.hash;//#后面的字段
        window.location.href = (currenturl.split("#"))[0]+'#profile';
    
    }
    

    利用锚点方式切换,页面刷新,也会定位至指定的页面,但是如果页面内容过长,出现滚动条时,锚点会定位至点击的a元素,页面不置顶了。

    2、利用history.pushState实现(推荐)

    index.js:
    
    var currenturl = window.location.href;
    if(currenturl.indexOf('?')< 1) {
        window.location.href = currenturl + '?home';
    } else {
        var hreftype = window.location.search.substr(1);//?后面的字段
        $("a[href=#"+hreftype+"]").click();//触发此a的点击事件,注意字段拼接#
    }
    
    
    profile.js:
    
    var currenturl = window.location.href;
    var newUrl = (currenturl.split("?"))[0];
    history.pushState('','',newUrl+'?profile');//前两个参数可省略
    

    以上两种方式都能实现标签页刷新指向当前页面,不会跳至默认首页,url改变页面不会自动刷新,但第二种方法更符合实际效果;

    url改变,页面不跳转:

    (1)锚点特性,或者说hash值变化(ps:window.location.hash),不会导致页面刷新;

    (2)使用pushState和replaceState,也不会导致页面刷新;

    补充一下pushState与replaceState的知识:

    两者都是html5的新特性,支持IE10以上,都有三个参数:

    以history.pushState(state,title,url)为例:

    (1)state:存储JSON字符串,可以用在popstate事件中。

    (2)title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替。

    (3)url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。

    两者的区别:

    pushState()是在history栈中新建一个历史记录,而replaceState()是替换当前记录;

    popState:

    (1) popstate事件的state属性会包含历史项(history entry)状态对象(state object)的拷贝。

    (2) 调用history.pushState()或history.replaceState()不会触发popstate事件。当浏览器做出动作时,才会触发该事件,如用户点击浏览器的回退按钮或者在Javascript代码中调用history.back();

    window.onpopstate = function(e){

    console.log(e);

    }

    或者 window.addEventListener(‘popstate’,function(e){

    console.log(e);

    },false);

    ajax请求后,浏览器点回退按钮是无法回退到ajax请求前的状态的,如果用pushState新增一个history记录,再用popstate进行页面回退,需要注意利用js控制点击事件(即非用户手动点击)时,需要判断是popstate导致的click事件还是用户手动点击的click事件,避免回退按钮需要点击多次才回退成功;

    展开全文
  • 替换当前url

    2021-05-12 12:14:28
    日常开发中经常遇到需要替换当前url的场景,这次我的需求背景是:打开一个新的页面且不需要历史记录;很自然的想到实现方案就是使用window.location.reload()来替换当前url替换时还使用了query-string 包 话不多...
  • 我们前端工程师需要做的就是将分享的参数在这个网页的地址栏进行获取并展示在信息确认页面。 分享功能请参考我上一篇文章:友盟U-share sdk 分享的接入(支持Android及IOS) URL地址(例):...
  • 在这种情况下,我将打开一个新的选项卡或窗口,并在地址栏中手动键入“ http(s)://www.mysite2.com/Finance/Market_News”,因为其数据库驱动的项目路径为“ / sitecore / content / Sitecore中的Site2 / Finance...
  • JavaScript 修改地址栏指定参数

    千次阅读 2019-04-17 17:34:58
    假如当前地址栏链接为:https://test.com/?type=students&page=3 //定义替换参数的方法 function changeURLArg(url,arg,arg_val){ var pattern=arg+'=([^&]*)'; var replaceText=arg+'='+arg_val; if...
  • 利用HTML5 history新特性replaceState方法可以修改当前页面地址栏参数,示例代码://选择日期后改变地址栏var urlSearch = location.href;var unformatStr = changeURLArg(urlSearch, "depDate", Qdate);if (!!...
  • //替换所有的参数 this.$router.push({ query:merge({},{'name':'小米'}) }) this.$router.replace({ query:merge({},{'name':'小米'}) }) replace()和push() 的区别: 1. this.$router.push() 描述:此方法会向...
  • 这两个点梳理出来就开始实现正则匹配,但是每次匹配的时候要考虑传入的值是否为空,如果为空要按上述两种情况去处理,把值替换为空串,如果不为空,按默认正则模板直接替换 代买实现: /** * @description: * @...
  • 地址栏 的乱码问题解决 url

    千次阅读 2018-01-10 15:38:31
    引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息。乱码问题就此产生了,该如何解决呢?且听本文详细道来。 1. 问题的...
  • js替换url指定参数的值

    千次阅读 2020-07-09 14:31:47
    * @param {*} url 需要替换url * @param {*} name 参数名称 * @param {*} value 替换的值 */ function replaceQueryString (url, name, value) { const re = new RegExp(name + '=[^&]*', 'gi') return...
  • 使用$location.search(user, "tom");添加参数与值, 浏览器地址栏url会发生变化,而且浏览器会产生1个历史记录。 问题: 如何改变url的参数与值的同时不要让浏览器产生历史记录?
  • jQuery替换url参数

    千次阅读 2018-04-26 15:56:08
    //给url填参数,用历史,可以保证不会刷新页面 function overrrideUrl(pageIndex) {  var url = window.location.href;  var newUrl= changeURLArg(url, "p", pageIndex);   window.history.pushState({}
  • vue工具类之——URL地址栏参数操作

    千次阅读 2019-01-10 14:09:00
    地址栏参数的获取,返回object地址栏参数的删除,返回string地址栏参数的修改,返回string/** * description: 登录页样式文件 * create_time: 2016-05-12 * message: 不接受任何私下吐槽,请当面沟通协调 * ...
  • 替换URL中的IP地址进行访问

    千次阅读 2019-06-12 11:50:59
    记录一下昨天碰到的问题以及解决过程, ...这样就尴尬了,运营人员需要在浏览器的地址栏中手工修改IP才能正常访问,严重影响工作效率;合作伙伴说后台难以修改,只能提供使用移动IP的URL,要么你...
  • 需求:浏览器地址栏跟随输入框的变化而变化。 需求背景:客户A需要将地址和查询条件一起分享给客户B。如下图 第一种方式:vue技术栈的话,使用路由的小技巧 router.push方法中只push一个query既可以实现,但是...
  • 方法一:使用js脚本:function createXMLHttpRequest(){if(window.XMLHttpRequest){XMLHttpR = new XMLHttpRequest();}else if(window.ActiveXObject){try{XMLHttpR = new ActiveXObject("Msxml2.XMLHTTP");...
  • vue在页面中修改url地址

    千次阅读 2021-12-17 14:58:11
    1.安装依赖包 webpack-merge npm i webpack-merge 或者 yarn add webpack-merge 2. this.$router.push({ query:merge(this.$route.query,{'key':'value'}) ...// 将key、value更换为自己需要的即可
  • 由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进。使用go()方法可以在用户的历史记录中任意跳转。这个方法接收一个参数,表示向后或...
  • 怎么通过js,修改当前浏览器地址栏的地址,并发起这个http的url请求(即类似于手动的,在浏览器的地址栏输入一个地址,然后点击Enter发起这个请求)  window.location.href = contextPath + "/login.html";
  • 比如我有一个URL http://www.baidu.com 我要怎么样替换当前地址栏URL 我是这样写的 window.location.replace("http://www.baidu.com"); window.location.href=window.location.href; 可是没有实现。
  • js改变URL地址栏但是不刷新页面

    万次阅读 2018-01-24 14:45:31
    一般用来清空url传递的参数不刷新,这样可以少发送一次请求到后台 var url = window.location.href; var valiable = url.split(“?”)[0]; window.history.pushState({},0,valiable);
  • nginx 反向代理 URL替换方案

    万次阅读 2019-10-22 19:27:45
    nginx 提供反向代理服务,日常开发...1.proxy_pass的目标地址,默认不带/,表示只代理域名,url和参数部分不会变(把请求的path拼接到proxy_pass目标域名之后作为代理的URL) 2.如果在目标地址后增加/,则表示把...
  • 示例:当从地址栏输入url http://localhost:8092/#/InspectionTransferPage?code1=JI1zqH0WscM=&code2=Tp8v8qDdBOrWIOuri+IyUg== 我们使用 getUrlKey: function (name) { return decodeURIComponent((new ...
  • 你知道当我们在网页浏览器(Web browser)的地址栏中输入 URL时,Web 页面是如何呈现的吗? 首先你知道DNS吗? DNS(Domain Name System)服务是和 HTTP 协议一样位于应用层的协议。它提供域名到 IP 地址之间的解析...
  • 这是上一个画面传过来的url参数: http://localhost:3000/#/manage/student?Flag=return 现在通过url参数判断flag为return,所以执行检索。但是有个问题是,当页面刷新时,因为url路径没有改变,所以flag仍为...
  • H5修改当前URL地址重新加载新的地址 根据项目需求自行修改,我当前实现的是去掉URL携带参数 let hash=window.location.hash; let protocol = window.location.protocol; let host = window.location.hostname; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,898
精华内容 19,959
热门标签
关键字:

替换地址栏的url