ลบพารามิเตอร์ URL โดยไม่ต้องรีเฟรชหน้า

ฉันกำลังพยายามลบทุกอย่างหลังจาก "?" ในเบราว์เซอร์ url บนเอกสารพร้อม

นี่คือสิ่งที่ฉันพยายาม:

jQuery(document).ready(function($) {

var url = window.location.href;
    url = url.split('?')[0];
});

ฉันสามารถทำสิ่งนี้และดูการทำงานด้านล่าง:

jQuery(document).ready(function($) {

var url = window.location.href;
    alert(url.split('?')[0]);
});

TL; DR

1- การปรับเปลี่ยน URL ปัจจุบันและเพิ่ม / ฉีดมัน(URL ที่ปรับเปลี่ยนใหม่)เป็นรายการ URL ใหม่ในรายการประวัติใช้pushState:

window.history.pushState({}, document.title, "/" + "my-new-url.html");

2- ในการแทนที่ URL ปัจจุบันโดยไม่ต้องเพิ่มลงในรายการประวัติให้ใช้replaceState:

window.history.replaceState({}, document.title, "/" + "my-new-url.html");

3- ทั้งนี้ขึ้นอยู่บนตรรกะทางธุรกิจ , pushStateจะเป็นประโยชน์ในกรณีเช่น:

• คุณต้องการสนับสนุนปุ่มย้อนกลับของเบราว์เซอร์

• คุณต้องการที่จะสร้างใหม่ URL, เพิ่ม / แทรก / ผลักดันURL ใหม่เพื่อประวัติศาสตร์รายการและทำให้มัน URL ปัจจุบัน

• อนุญาตให้ผู้ใช้บุ๊กมาร์กหน้าด้วยพารามิเตอร์เดียวกัน (เพื่อแสดงเนื้อหาเดียวกัน)

• โปรแกรมเข้าถึงข้อมูลผ่านstateObjแล้วแยกจากสมอ

ตามที่ฉันเข้าใจจากความคิดเห็นของคุณคุณต้องการล้าง URL โดยไม่เปลี่ยนเส้นทางอีกครั้ง

โปรดทราบว่าคุณไม่สามารถเปลี่ยน URL ทั้งหมดได้ คุณสามารถเปลี่ยนสิ่งที่เกิดขึ้นหลังจากชื่อโดเมน ซึ่งหมายความว่าคุณไม่สามารถเปลี่ยนแปลงได้www.example.com/แต่คุณสามารถเปลี่ยนแปลงสิ่งที่ตามมาได้.com/

www.example.com/old-page-name => can become =>  www.example.com/myNewPaage20180322.php

พื้นหลัง

เราสามารถใช้:

1- เมธอด pushState ()หากคุณต้องการเพิ่มURL ที่แก้ไขใหม่ในรายการประวัติ

2- เมธอด replaceState ()หากคุณต้องการอัปเดต / แทนที่รายการประวัติปัจจุบัน

.replaceState()ดำเนินการเหมือนกับ.pushState()ยกเว้นที่.replaceState() แก้ไขรายการประวัติปัจจุบันแทนที่จะสร้างรายการใหม่ โปรดทราบว่านี่ไม่ได้ป้องกันการสร้างรายการใหม่ในประวัติเบราว์เซอร์ทั่วโลก

---

.replaceState()มีประโยชน์อย่างยิ่งเมื่อคุณต้องการอัปเดตวัตถุสถานะหรือURLของรายการประวัติปัจจุบันเพื่อตอบสนองต่อการกระทำของผู้ใช้

รหัส

ในการทำเช่นนั้นฉันจะใช้เมธอด pushState ()สำหรับตัวอย่างนี้ซึ่งทำงานคล้ายกับรูปแบบต่อไปนี้:

var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );

อย่าลังเลที่จะแทนที่pushStateด้วยreplaceStateตามความต้องการของคุณ

คุณสามารถใช้แทนพารามิเตอร์"object or string"ด้วย{}และ"Title"ด้วยdocument.titleดังนั้นงบสุดท้ายจะกลายเป็น:

window.history.pushState({}, document.title, "/" + myNewURL );

ผล

โค้ดสองบรรทัดก่อนหน้านี้จะสร้าง URL เช่น:

https://domain.tld/some/randome/url/which/will/be/deleted/

ที่จะเป็น:

https://domain.tld/my-new-url.php

หนังบู๊

ตอนนี้เราลองใช้วิธีอื่น สมมติว่าคุณต้องการเก็บชื่อไฟล์ ชื่อไฟล์มาหลังจากที่ผ่านมาและก่อนสตริงการสืบค้น/?

http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john

จะ:

http://www.someDomain.com/keepThisLastOne.php

บางสิ่งเช่นนี้จะทำให้การทำงาน:

 //fetch new URL
 //refineURL() gives you the freedom to alter the URL string based on your needs. 
var myNewURL = refineURL();

//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced. 
window.history.pushState("object or string", "Title", "/" + myNewURL );


//Helper function to extract the URL between the last '/' and before '?' 
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php' 
 //pseudo code: edit to match your URL settings  

   function refineURL()
{
    //get full URL
    var currURL= window.location.href; //get current address

    //Get the URL between what's after '/' and befor '?' 
    //1- get URL after'/'
    var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
    //2- get the part before '?'
    var beforeQueryString= afterDomain.split("?")[0];  

    return beforeQueryString;     
}

UPDATE:

สำหรับแฟนซับหนึ่งคนลองใช้สิ่งนี้ในคอนโซล / firebug ของคุณและ URL หน้านี้จะเปลี่ยนไป:

    window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);

URL หน้านี้จะเปลี่ยนจาก:

http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103

ถึง

http://stackoverflow.com/22753103#22753103

หมายเหตุ:เป็นซามูเอล LiewHTML5ที่ระบุไว้ในความคิดเห็นด้านล่างคุณสมบัตินี้ได้รับการแนะนำเฉพาะสำหรับ

อีกวิธีหนึ่งคือการเปลี่ยนเส้นทางหน้าเว็บของคุณ (แต่คุณจะสูญเสียสตริงข้อความค้นหา `? 'มันยังคงต้องการหรือมีการประมวลผลข้อมูลหรือไม่)

window.location.href =  window.location.href.split("?")[0]; //"http://www.newurl.com";

สิ่งเหล่านี้ล้วนทำให้เข้าใจผิดคุณไม่เคยต้องการเพิ่มลงในประวัติเบราว์เซอร์เว้นแต่คุณต้องการไปที่หน้าอื่นในแอปหน้าเดียว หากคุณต้องการลบพารามิเตอร์โดยไม่มีการเปลี่ยนแปลงในหน้าคุณต้องใช้:

window.history.replaceState(null, null, window.location.pathname);

วิธีง่ายๆในการทำเช่นนี้ใช้ได้กับทุกหน้าต้องใช้ HTML 5

// get the string following the ?
var query = window.location.search.substring(1)

// is there anything there ?
if(query.length) {
   // are the new history methods available ?
   if(window.history != undefined && window.history.pushState != undefined) {
        // if pushstate exists, add a new state to the history, this changes the url without reloading the page

        window.history.pushState({}, document.title, window.location.pathname);
   }
}

ฉันเชื่อว่าวิธีที่ดีที่สุดและง่ายที่สุดสำหรับสิ่งนี้คือ:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

หากฉันมีแท็กพิเศษที่ท้าย URL ของฉันเช่น: http://domain.com/?tag=12345 นี่คือรหัสด้านล่างเพื่อลบแท็กนั้นเมื่อใดก็ตามที่มีอยู่ใน URL:

<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: document.title, Url: window.parent.location.pathname };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        window.parent.location = window.parent.location.pathname;
    }
}
</script>

สิ่งนี้ทำให้แนวคิดในการลบพารามิเตอร์ (หรือทั้งหมด) อย่างน้อยหนึ่งพารามิเตอร์ออกจาก URL

ด้วยwindow.location.pathnameคุณจะได้รับทุกอย่างก่อน '?' ใน url

var pathname = window.location.pathname; // ส่งคืนพา ธ เท่านั้น

var url = window.location.href; // ส่งคืน URL แบบเต็ม

successผมอยากจะเอาเพียงหนึ่งพระราม นี่คือวิธีที่คุณสามารถทำได้:

let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)

#hashนอกจากนี้ยังคงมี

URLSearchParamsจะไม่ทำงานใน IE แต่การทำงานในขอบ คุณสามารถใช้ polyfillหรือ a สามารถใช้ฟังก์ชันnaïve helper สำหรับการรองรับ IE:

function take_param(key) {
    var params = new Map(location.search.slice(1).split('&')
        .map(function(p) { return p.split(/=(.*)/) }))   
    var value = params.get(key)
    params.delete(key)
    var search = Array.from(params.entries()).map(
        function(v){ return v[0]+'='+v[1] }).join('&')
    return {search: search ? '?' + search : '', value: value}
}

สามารถใช้เช่น:

history.replaceState(
    null, '', take_param('success').search + location.hash)

ทางออกที่ดีกว่า:

window.history.pushState(null, null, window.location.pathname);

วิธีแก้ปัญหาเหล่านี้ไม่ได้ผลสำหรับฉันนี่คือฟังก์ชั่นที่เข้ากันได้กับ IE11 ซึ่งสามารถลบพารามิเตอร์หลายตัวได้:

/**
* Removes URL parameters
* @param removeParams - param array
*/
function removeURLParameters(removeParams) {
  const deleteRegex = new RegExp(removeParams.join('=|') + '=')

  const params = location.search.slice(1).split('&')
  let search = []
  for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])

  window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}

removeURLParameters(['param1', 'param2'])

//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
    var newUrl = refineUrl();
    window.history.pushState("object or string", "Title", "/"+newUrl );
}

function refineUrl()
{
    //get full url
    var url = window.location.href;
    //get url after/  
    var value = url = url.slice( 0, url.indexOf('?') );
    //get the part after before ?
    value  = value.replace('@System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');  
    return value;     
}

หากต้องการล้างพารามิเตอร์ทั้งหมดโดยไม่ต้องรีเฟรชหน้าและหากคุณใช้ HTML5 คุณสามารถทำได้ดังนี้:

history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is

จะเป็นการเพิ่มรายการในประวัติเบราว์เซอร์ คุณสามารถพิจารณาได้replaceStateหากคุณไม่ต้องการเพิ่มรายการใหม่และต้องการเปลี่ยนรายการเก่า

ใน jquery ใช้ <

window.location.href =  window.location.href.split("?")[0]

นี่คือซับ ES6 หนึ่งที่เก็บรักษาแฮชตำแหน่งและไม่ทำให้ประวัติเบราว์เซอร์สกปรกโดยใช้replaceState:

(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)