جاوااسکریپت - حذف پارامترهای 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]);
});

پاسخ شماره ۱

خلاصه

1. برای اصلاح 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;     
}

بهروزرسانی:

برای طرفداران کدهای تک خطی، این را در کنسول/فایرباگ خود امتحان کنید و URL این صفحه تغییر خواهد کرد:

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

این آدرس صفحه تغییر خواهد کرد از:

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

به

http://stackoverflow.com/22753103#22753103

توجه: همانطور که Samuel Liew در نظرات زیر اشاره کرده است، این ویژگی تنها برای HTML5 معرفی شده است.

یک روش جایگزین این است که در واقع صفحه خود را دوباره هدایت کنید (اما رشته پرس و جو `?' را از دست خواهید داد، آیا هنوز به آن نیاز است یا دادهها پردازش شدهاند؟).

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

یادداشت ۲:

به نظر میرسد فایرفاکس window.history.pushState({}, document.title, ''); را نادیده میگیرد وقتی آرگومان آخر یک رشته خالی باشد. افزودن یک اسلش ('/') همانطور که انتظار میرفت عمل کرد و کل بخش پرسوجوی رشته URL را حذف کرد. به نظر میرسد کروم با یک رشته خالی مشکلی ندارد.

پاسخ شماره ۲

اینها همگی گمراهکننده هستند، شما هرگز نمیخواهید به تاریخچه مرورگر چیزی اضافه کنید مگر اینکه بخواهید به صفحهای دیگر در یک برنامه تک صفحهای بروید. اگر میخواهید پارامترها را بدون تغییر صفحه حذف کنید، باید از این استفاده کنید:

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

پاسخ شماره ۳

من معتقدم بهترین و سادهترین روش برای این کار این است:

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

پاسخ شماره ۴

من میخواستم فقط یک پارامتر success را حذف کنم. در اینجا نحوه انجام این کار آمده است:

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

این همچنین #hash را حفظ میکند.

URLSearchParams در IE کار نخواهد کرد، اما برای Edge در حال کار است. میتوانید از یک polyfill استفاده کنید یا میتوانید از یک تابع کمکی ساده برای پشتیبانی از 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)

پاسخ شماره ۵

یک روش ساده برای انجام این کار، در هر صفحهای کار میکند، نیاز به 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);
   }
}

پاسخ شماره ۶

راهحل بهتر :

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

پاسخ شماره ۷

اگر من یک تگ ویژه در انتهای 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 شما اساساً همه چیز قبل از '?' در آدرس اینترنتی را دریافت میکنید.

var pathname=window.location.pathname;/تنها مسیر را برمیگرداند

var url=window.location.href;/آدرس کامل URL را برمیگرداند