পৃষ্ঠাটি রিফ্রেশ না করে URL প্যারামিটারগুলি সরান

153

আমি "" এর পরে সবকিছু সরিয়ে দেওয়ার চেষ্টা করছি? ব্রাউজারে নথিতে ইউআরএল প্রস্তুত।

এখানে আমি চেষ্টা করছি:

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]);
});
javascript  jquery 
— ডেরেক
সূত্র
এক পৃষ্ঠায় দুটি ফর্ম রয়েছে এবং একটি ফর্ম জমা দেওয়া হলে এটি একটি পণ্যকে কার্টে যুক্ত করে এবং পৃষ্ঠাটি রিফ্রেশ হওয়ার পরে url এ একটি দীর্ঘ পরামিতি যুক্ত করে। সুতরাং আমি নথিটি প্রস্তুত হয়ে যখন এটি পরামিতিটি সরাতে সক্ষম হতে চাই এবং এটি একটি দিয়ে শুরু হয়?
— ডেরেক
1
আপনি যদি পৃষ্ঠাটি রিফ্রেশ করতে চান তবে কেন অপেক্ষা করবেন .ready()? নতুন ইউআরএলে আপনাকে পুনঃনির্দেশ করার জন্য আপনাকে অপেক্ষা করতে হবে না বা .pushState()জোড়াইদের প্রস্তাবিত হিসাবে কেবল ব্যবহার করতে হবে।
— jਫਰ00

উত্তর:

227

টি এল; ডিআর

1- বর্তমান ইউআরএল সংশোধন করতে এবং ইতিহাস তালিকায় নতুন ইউআরএল এন্ট্রি হিসাবে এটি (নতুন পরিবর্তিত ইউআরএল) যুক্ত / ইনজেক্ট করতে , ব্যবহার করুন :pushState

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

2- ইতিহাসের এন্ট্রিগুলিতে এটি যুক্ত না করে বর্তমান ইউআরএল প্রতিস্থাপন করতে :replaceState

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

3- নির্ভর করে আপনার উপর ব্যবসা লজিক , pushStateযেমন ক্ষেত্রেই উপযোগী হতে হবে:

  • আপনি ব্রাউজারের পিছনের বোতামটি সমর্থন করতে চান

  • আপনি একটি নতুন ইউআরএল তৈরি করতে, ইতিহাসের এন্ট্রিগুলিতে নতুন ইউআরএল যুক্ত / সন্নিবেশ / পুশ করতে এবং এটি বর্তমান ইউআরএল তৈরি করতে চান

  • ব্যবহারকারীদের একই পরামিতিগুলির সাথে পৃষ্ঠাটি বুকমার্ক করতে দেয় (একই সামগ্রীগুলি দেখানোর জন্য)

  • অ্যাঙ্কর থেকে তদাতিরিক্ত পার্সের মাধ্যমে প্রোগ্রামগতভাবে ডেটা অ্যাক্সেস করতেstateObj

আমি যেমন আপনার মন্তব্য থেকে বুঝতে পেরেছি, আপনি আবার পুনর্নির্দেশ না করেই আপনার URL টি পরিষ্কার করতে চান।

মনে রাখবেন আপনি পুরো URL টি পরিবর্তন করতে পারবেন না। ডোমেনের নামের পরে যা আসে তা আপনি কেবল পরিবর্তন করতে পারেন। এর অর্থ হল যে আপনি পরিবর্তন করতে পারবেন না www.example.com/তবে আপনি যা করতে পারেন তা পরিবর্তন করতে পারবেন.com/

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

পটভূমি

আমরা ব্যবহার করতে পারি:

1- পুশস্টেট () পদ্ধতিটি যদি আপনি ইতিহাসের এন্ট্রিগুলিতে একটি নতুন পরিবর্তিত URL যুক্ত করতে চান add

2- যদি আপনি বর্তমান ইতিহাসের এন্ট্রি আপডেট / প্রতিস্থাপন করতে চান তবে প্রতিস্থাপনের স্টেট () পদ্ধতিটি ।

.replaceState()নতুন ইতিহাস তৈরির পরিবর্তে বর্তমান ইতিহাসের এন্ট্রিটি সংশোধন করে.pushState() বাদে ঠিক .replaceState() তেমনভাবে কাজ করে । নোট করুন যে এটি বিশ্বব্যাপী ব্রাউজারের ইতিহাসে একটি নতুন এন্ট্রি তৈরির প্রতিরোধ করে না।

.replaceState()বিশেষত কার্যকর যখন আপনি কিছু ব্যবহারকারীর ক্রিয়া প্রতিক্রিয়া হিসাবে বর্তমান ইতিহাস প্রবেশের স্টেট অবজেক্ট বা URL আপডেট করতে চান ।

কোড

এটি করার জন্য আমি এই উদাহরণের জন্য পুশস্টেট () পদ্ধতিটি ব্যবহার করব যা নিম্নলিখিত ফর্ম্যাটের সাথে একইভাবে কাজ করে:

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তাই চূড়ান্ত statment হয়ে যাবে:

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

ফলাফল

আগের দুটি লাইনের কোড একটি ইউআরএল তৈরি করবে যেমন: 

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

হালনাগাদ:

একটি লাইনার অনুরাগীর জন্য, আপনার কনসোল / ফায়ারব্যাগে এটি ব্যবহার করে দেখুন এবং এই পৃষ্ঠার ইউআরএল পরিবর্তিত হবে: 

    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

দ্রষ্টব্য: স্যামুয়েল লিউ নীচের মন্তব্যে নির্দেশিত হিসাবে , এই বৈশিষ্ট্যটি কেবলমাত্র জন্য চালু করা হয়েছেHTML5 ।

বিকল্প পন্থাটি আসলে আপনার পৃষ্ঠাটিকে পুনর্নির্দেশ করা হবে (তবে আপনি কোয়েরি স্ট্রিং lose? 'হারাবেন, এটির কি এখনও প্রয়োজন আছে বা ডেটা প্রক্রিয়াজাত করা হয়েছে?)। 

window.location.href =  window.location.href.split("?")[0]; //"http://www.newurl.com";
— মোহাম্মদ জোড়াইদ
সূত্র
2
আপনি উল্লেখ করতে ভুলে গেছেন যে এটি কেবল একটি HTML5- বৈশিষ্ট্য। বিকাশকারী.মোজিলা.অর্গ
— en- ইউএস / ডকস / ওয়েব / গুয়াইড / এপিআই / ডম /
আপনি কেন শেষ স্ল্যাশ থেকে সরে যাচ্ছেন? ওপির প্রশ্নের সাথে এর কী সম্পর্ক? তারা কেবল ক্যোয়ারী স্ট্রিং থেকে মুক্তি পেতে চায়। প্রথম প্রশ্ন চিহ্ন কোয়েরি স্ট্রিংয়ের শুরুটিকে সংজ্ঞায়িত করে।
— jਫਰ00
6
replaceStateআরও ভাল ফিট বলে মনে হচ্ছে, তবে pushStateপাশাপাশি কাজ করবে, যতক্ষণ না আপনি ব্রাউজারে পিছনে এবং ফরোয়ার্ড বোতামগুলি ক্লিক করা শুরু করেন এবং আপনি বুঝতে না পারছেন যে ইতিহাস এপিআইয়ের সাথে কাজ করার জন্য পুরো লাইব্রেরি রয়েছে a
— অ্যাডিনিও
@ jfriend00 ফাংশনটির আচরণের ভিত্তিতে, আপনি তৃতীয় প্যারামিটারে যা যুক্ত করবেন তা ডোমেন নামের পরে ইউআরএল, ডোমেনের পরে / www.example.com/ হিসাবে দেওয়া হবে। ওপিতে ডোমেন নাম এবং এর মধ্যে বেশ কয়েকটি / থাকার সম্ভাবনা রয়েছে? ওয়েবসাইটটি যদি কোনও উপ ডিরেক্টরিতে থাকে, সুতরাং, এটি ইউআরএলকে কীভাবে অনুসরণ করতে হবে, এখন কীভাবে এটি সঠিকভাবে পাওয়া যায় সে সম্পর্কে প্রশ্নটি ছিল, যেহেতু ইউআরএলটি কীভাবে চলবে সে সম্পর্কে আরও ভাল ইউআরএল পরিমার্জন করা উচিত do
— মোহাম্মদ জোড়াইদ
আমি কেবল বলছি যে আপনার এটির কোনও প্রয়োজন নেই url.substring(url.lastIndexOf('/') + 1);। url.split("?")[0]প্রথম প্রশ্ন চিহ্নের আগে অংশটি পেয়ে যাবে যা আমার মনে হয় ওপি চেয়েছিল। ওপির প্রশ্নটি জিজ্ঞাসা করে: "আমি ব্রাউজার url এ"? "এর পরে সমস্ত কিছু সরিয়ে দেওয়ার চেষ্টা করছি"।
— jਫਰ00
156

এগুলি সমস্ত বিভ্রান্তিমূলক, আপনি একক পৃষ্ঠাগুলির অ্যাপ্লিকেশনে অন্য কোনও পৃষ্ঠায় যেতে না চাইলে আপনি কখনই ব্রাউজারের ইতিহাসে যুক্ত করতে চান না। আপনি যদি পৃষ্ঠায় কোনও পরিবর্তন ছাড়াই প্যারামিটারগুলি সরাতে চান তবে আপনাকে অবশ্যই এটি ব্যবহার করতে হবে:

window.history.replaceState(null, null, window.location.pathname);
— evanjmg
সূত্র
3
KISS (কিপ বোকা এবং সহজ) ওপিকে সব সরাতে বললো? এবং তিনি যা চেয়েছিলেন তার জন্য আপনি পেতে পারেন এটির সহজ উত্তর!
— ওয়ারফেস
ফায়ার ফক্সে কাজ করেনি। রিফ্রেশে, প্যারামিটারগুলি এখনও উপস্থিত হবে। উভয় ধাক্কা এবং প্রতিস্থাপন ব্যবহার করে কাজ করে। উইন্ডো হিস্টরি.রেপসেট স্টেট ({পৃষ্ঠা: অবস্থান.পাথনাম}, ডকুমেন্ট.টাইটেল, উইন্ডো.লোকেশন.প্যাথনাম); উইন্ডো হিস্টরি.পুষস্টেট (location পৃষ্ঠা: অবস্থান.pathname।, ডকুমেন্ট.টাইটেল, উইন্ডো.লোকেশন.প্যাথনাম);
— অজয় সিং
1
ইতিহাস.রেপসস্টেট (নাল, নাল,
— লোকেশন.প্যাথনাম + লোকেশন.হ্যাশ
29

এটি করার একটি সহজ উপায়, যে কোনও পৃষ্ঠায় কাজ করে, এইচটিএমএল 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);
   }
}
— মার্টিজন শেফার
সূত্র
এটি আশ্চর্যজনকভাবে ভাল কাজ করে। দুর্ভাগ্যক্রমে, কেন এটি কাজ করে তা সম্পর্কে আমার প্রথম সূত্র নেই। কৃতজ্ঞ সব একই।
— ম্যাট ক্রিমেন্স 16
1
প্রথম দুটি লাইনে চেক আছে কিনা পরে কিছু আছে কিনা? (সাবস্ট্রিং কেবল '?' কে সরিয়ে দেয়) তারপরে আমি যাচাই করে দেখি যে ব্রাউজারটি নতুন পুসস্টেট কল সমর্থন করে কিনা এবং অবশেষে আমি ইউআরএসের স্ট্যাকটিতে একটি রাষ্ট্র যুক্ত করতে পুসস্টেট ব্যবহার করি (আপনি সেই স্ট্যাকের উপর url টিপতে এবং পপ করতে পারেন), উইন্ডো.লোকশন .pathname একটি স্থানীয় URL বিয়োগ প্রশ্নের সাথে এবং বিয়োগ ডোমেইন নাম এবং উপসর্গ (হয় domain.com/THIS?notthis )
— Martijn শেফার
— মার্টিজান শেফার
23

আমি এর সেরা এবং সহজ পদ্ধতিটি বিশ্বাস করি:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);
— ChristianG
সূত্র
11

আমার ইউআরএলটির শেষে যদি আমার কাছে একটি বিশেষ ট্যাগ থাকে তবে: http://domain.com/?tag=12345 এই ট্যাগটি মুছে ফেলার জন্য নীচের কোডটি যখনই ইউআরএলে উপস্থাপন করে:

<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>

এটি ইউআরএল থেকে এক বা একাধিক (বা সমস্ত) পরামিতি সরানোর ধারণা দেয়

সঙ্গে window.location.pathname আপনি মূলত আগে সবকিছু পেতে '?' ইউআরএল মধ্যে।

var pathname = window.location.pathname; // কেবল পথ ফেরায়

var url = window.location.href; // সম্পূর্ণ ইউআরএল ফেরায়

— তারিক
সূত্র
আমি নিশ্চিত যে এটি প্রশ্নের উত্তর দিচ্ছে না তবে প্রশ্নটি নিজেই অস্পষ্ট :)
— মার্তিজান শেফার
@ মার্তিজজনশেফার ঠিক আছে, আমি মূল প্রশ্নের উত্তর দেওয়ার উত্তরটির উন্নতি করেছি, নোটের জন্য ধন্যবাদ।
— তারিক
10

আমি কেবল একটি পরম মুছে ফেলতে চেয়েছিলাম success। আপনি কীভাবে এটি করতে পারেন তা এখানে:

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

এটিও ধরে রাখে #hash।

URLSearchParamsআইই তে কাজ করবে না, তবে এজের জন্য কাজ করা হবে । আপনি একটি পলিফিল ব্যবহার করতে পারেন বা আই-সাপোর্টের জন্য একটি নির্লজ্জ সাহায্যকারী ফাংশন ব্যবহার করতে পারেন:

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)
— ওডিনহো - ভেলমন্ট
সূত্র
দুর্দান্ত সমাধান, 'যোগ না করার কোনও উপায় আছে?' যদি কোন প্যারাম পাস হয় না?
— রিক্স
2
অবশ্যই @RickS, take_paramইতিমধ্যে যে কাজ করা হয়, কিন্তু আপনি করতে পারেন URLSearchParamsকরে একই কাজ: history.replaceState(null, '', (params ? '?' + params : '') + location.hash)। অথবা তবে আপনি পছন্দ করেন।
— ওডিনহো - ভেলমন্ট
6

এই সমাধানগুলির কোনওই সত্যিই আমার পক্ষে কাজ করে নি, এখানে একটি আইই 11-সামঞ্জস্যপূর্ণ ফাংশন যা একাধিক পরামিতিগুলিও সরিয়ে ফেলতে পারে:

/**
* 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'])
— ফ্যাবিয়ান ভন এলার্টস
সূত্র
2 
//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;     
}
— চোozা রাজন
সূত্র
1

কোনও পৃষ্ঠা রিফ্রেশ না করে সমস্ত পরামিতিগুলি সাফ করার জন্য, এবং যদি আপনি এইচটিএমএল 5 ব্যবহার করে থাকেন তবে আপনি এটি করতে পারেন:

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

এটি ব্রাউজারের ইতিহাসে একটি এন্ট্রি যুক্ত করবে। আপনি replaceStateযদি নতুন এন্ট্রি যুক্ত করতে না চান এবং কেবল পুরানো এন্ট্রিটি প্রতিস্থাপন করতে চান তবে আপনি এটি বিবেচনা করতে পারেন।

— তামাশা
সূত্র
0

জিকুরিতে <ব্যবহার করুন

window.location.href =  window.location.href.split("?")[0]
— পার্থ
সূত্র
6
সে সম্পর্কে jQuery কিছুই নেই
— j08691
0

এখানে একটি ES6 একটি লাইনার রয়েছে যা অবস্থানের হ্যাশ সংরক্ষণ করে এবং ব্যবহার করে ব্রাউজারের ইতিহাসকে দূষিত করে না replaceState:

(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)
— joeyhoer
সূত্র
আপনি কি এই সম্পর্কে আরও কিছু তথ্য যুক্ত করতে পারেন, এটি কী করছে তা বোঝা শক্ত।
— রিক্স
2
@ রিকস এটি একটি আইআইএফই (তাত্ক্ষণিকভাবে ফাংশন এক্সপ্রেশনটি অনুরোধ করা হয়েছে) এজন্য এটি প্রথম বন্ধনী (বুনিয়াদ) (বুনিয়াদ) এ আবদ্ধ থাকে এটি বেনামে ফাংশন হিসাবে নিজের উপর থাকতে সক্ষম করে, শেষে (অবস্থান) অবিলম্বে এটি ফাংশনটি পাস করার অনুরোধ করে বিশ্বব্যাপী locationওরফে window.locationবস্তু, তাই ফাংশন globals অ্যাক্সেস আছে locationযেমন lবাকি সব অন্যান্য উত্তর মতো মৌলিক replaceState তিনি পথনাম এবং হ্যাশ নতুন URL হিসাবে (example.com/#hash) concatenating হচ্ছে। আশা করি এটি হজমযোগ্য, যদি আমাকে না জানায় 😉
— রাউ 16
@ কেন শুধু ব্যবহার window.history.replaceState({}, '', location.pathname + location.hash)করবেন না ? ;)
— ফ্যাবিয়ান ভন এলার্টস
@ ফ্যাবিভনএলটারস ভাল প্রশ্ন আসলে, সত্যিই নিশ্চিত হন না যে আপনাকে কেবল location2 বারই লিখতে হবে না 😁 তবুও এটিকে কোনও ভেরিয়েবলের জন্য বরাদ্দ দেওয়ার দরকার নেই 😉 বা এটির মধ্যে আরও কিছু আছে?
— রাউ 18
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.