পৃষ্ঠাটি পুনরায় লোড না করে কোয়েরি স্ট্রিংটি সংশোধন করা হচ্ছে

Question

আমি একটি ফটো গ্যালারী তৈরি করছি, এবং যখন ফটো ব্রাউজ করা হয় তখন ক্যোয়ারী স্ট্রিং এবং শিরোনাম পরিবর্তন করতে সক্ষম হতে চাই।

আমি যে আচরণটি সন্ধান করছি তা প্রায়শই অবিচ্ছিন্ন / অসীম পৃষ্ঠার কিছু প্রয়োগের সাথে দেখা হয়, যেখানে আপনি ক্যোয়ারিং স্ট্রিংটি নীচে স্ক্রোল করার সময় পৃষ্ঠা নম্বর ( http://x.com?page=4 ) ইত্যাদি বাড়িয়ে তোলেন This এটি হওয়া উচিত তত্ত্বের ক্ষেত্রে সহজ, তবে আমি এমন কিছু চাই যা বড় ব্রাউজারগুলিতে নিরাপদ।

আমি এই দুর্দান্ত পোস্টটি পেয়েছি , এবং এর সাথে উদাহরণটি অনুসরণ করার চেষ্টা করছিলাম window.history.pushstate, তবে এটি আমার পক্ষে কাজ করছে বলে মনে হয় না। এবং আমি নিশ্চিত নই যে এটি আদর্শ কিনা কারণ আমি সত্যিই ব্রাউজারের ইতিহাসটি পরিবর্তনের বিষয়ে চিন্তা করি না।

আমি প্রতিবার ছবি পরিবর্তন হওয়ার সাথে সাথে পৃষ্ঠাটি পুনরায় লোড না করেই কেবলমাত্র বর্তমানে দেখা ফটো বুকমার্ক করার ক্ষমতাটি সরবরাহ করতে সক্ষম হতে চাই।

এখানে অসীম পৃষ্ঠার একটি উদাহরণ যা ক্যোয়ারী স্ট্রিংকে সংশোধন করে: http://tumbledry.org/

আপডেট এই পদ্ধতিটি পেয়েছে:

window.location.href = window.location.href + '#abc';

এটি আমার জন্য কাজ করে বলে মনে হচ্ছে তবে আমি একটি নতুন ক্রোমে আছি .. এটি সম্ভবত পুরানো ব্রাউজারগুলির সাথে কিছু সমস্যা সৃষ্টি করবে?

Comments

আপনি কি এমন কোনও উদাহরণ সাইটের লিঙ্ক পোস্ট করতে পারেন যা এর কোয়েরি স্ট্রিংটিকে গতিশীলভাবে আপডেট করে? এটি করা সম্ভব বলে আমি মনে করি না, তবে আপনি হ্যাশটির মান পরিবর্তন করতে পারেন এবং এটি আপনি যা চান তা পেতে যথেষ্ট হতে পারে।

— পয়েন্টটি

জাভাস্ক্রিপ্ট / jquery দিয়ে কীভাবে ইউআরএল ম্যানিপুলেট করবেন তার

— কোয়ান্টিন

গিটিহাব কীভাবে ইউআরএল পরিবর্তন করে কিন্তু পুনরায় লোডের

— কোয়ান্টিন

নতুন ড্রপবক্স কেন পৃষ্ঠা রিফ্রেশ ছাড়াই ইউআরএল পরিবর্তন করতে পারে তার ডুপ্লিকেট ? এবং তিনটি প্রশ্নের এটির নকল হিসাবে চিহ্নিত করা হয়েছে

— কোয়ান্টিন

@Quentin। আপনার কাছে কেবল একটি নিকট ভোট থাকতে পারে ...:)

— জিডোরন মনিকা

Answer 1

আপনি যদি হ্যাশ সংশোধন খুঁজছেন, আপনার সমাধান ঠিক আছে। তবে, আপনি যদি ক্যোয়ারী পরিবর্তন করতে চান তবে আপনি পুশস্টেটটি ব্যবহার করতে পারেন, যেমনটি আপনি বলেছেন। এখানে এটি একটি উদাহরণ যা আপনাকে এটি সঠিকভাবে প্রয়োগ করতে সহায়তা করতে পারে। আমি পরীক্ষা করেছি এবং এটি ভাল কাজ করেছে:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

এটি পৃষ্ঠাটি পুনরায় লোড করে না, তবে এটি আপনাকে কেবল ইউআরএল কোয়েরি পরিবর্তন করতে দেয়। আপনি প্রোটোকল বা হোস্ট মানগুলি পরিবর্তন করতে সক্ষম হবেন না। এবং অবশ্যই এটির জন্য আধুনিক ব্রাউজারগুলির প্রয়োজন যা HTML5 ইতিহাস এপিআই প্রক্রিয়াকরণ করতে পারে।

আরও তথ্যের জন্য:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Comments

আমি বিশ্বাস করি আপনি খাটো করতে পারেন window.location.protocol + '//' + window.location.hostশুধু: window.location.origin।

— গ্যারেট

এছাড়াও, তথ্য সংযোজনের জন্য, আপেক্ষিক পাথগুলি পাশাপাশি কাজ করে history.pushState()। কোন সত্য stateযুক্তি প্রয়োজন হয় না। উভয়েরই অর্থ আপনি history.pushState(null, '', '/foo?bar=true')যদি নতুন ইউআরএল একই হোস্ট / পোর্টে থাকে তবে আপনি কিছু সহজ করতে পারেন ।

— ব্লেস্কোভিচz

মনে রাখবেন, আপনি যদি ব্রাউজারের ইতিহাসে নতুন রাষ্ট্রটি প্রদর্শিত না চান তবে আপনি history.replaceState()একই যুক্তি দিয়ে ব্যবহার করতে পারেন ।

— ব্ল্যাকাস

ইতিহাস.প্লেস স্টেট ব্যবহার করুন () অন্যথায় আপনার ব্রাউজারে দুবার BACK বোতামটি ক্লিক করতে হবে

— ঝেনিয়া

আধুনিক ব্রাউজারগুলিতে আপনি কেবল এটি করতে পারেন:if (window.history.pushState) { const newURL = new URL(window.location.href); newURL.search = '?myNewUrlQuery=1'; window.history.pushState({ path: newURL.href }, '', newURL.href); }

— অ্যালান ব্যাপ্তিস্ট

Answer 2

ফ্যাবিওর জবাব বন্ধ করে দিয়ে আমি দুটি ফাংশন তৈরি করেছি যা সম্ভবত এই প্রশ্নের পক্ষে যে কেউ হোঁচট খাচ্ছে তার পক্ষে কার্যকর হবে। এই দুটি ফাংশন দিয়ে, আপনি insertParam()একটি কী এবং একটি আর্গুমেন্ট হিসাবে মান দিয়ে কল করতে পারেন । এটি হয় ইউআরএল প্যারামিটার যুক্ত করবে বা, যদি একই কী সহ কোনও কোয়েরি প্যারাম ইতিমধ্যে উপস্থিত থাকে, তবে সেই প্যারামিটারটিকে নতুন মানতে পরিবর্তন করা হবে:

//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
        return url;
    } else {
        return url;
    }
}

//function to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrlWithOutHash.indexOf('?') !== -1){
            queryStart = '&';
        } else {
            queryStart = '?';
        }

        var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
        window.history.pushState({path:newurl},'',newurl);
    }
}

Comments

আপনার ফাংশনগুলি সেট এবং মুছে ফেলারnew URLSearchParams() মতো স্থানীয় পদ্ধতিগুলির চেয়ে কীভাবে আরও ভাল ? উভয় ক্ষেত্রেই আমাদের এটি ইতিহাসে রাখতে হবেhistory.pushState()

— অ্যালেক্সনিকনভ

new URLSearchParams()

— IE-

আপনাকে ধন্যবাদ @ jmona789 এটি আমার জন্য নিখুঁতভাবে কাজ করেছে এবং ঠিক আমি যা খুঁজছিলাম তা ছিল

— mknopf

Answer 3

আমি দুর্দান্ত সাফল্যের সাথে নিম্নলিখিত জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করেছি:

https://github.com/balupton/jquery-history

এটি HTML5 ইতিহাস এপিআই পাশাপাশি পুরানো ব্রাউজারগুলির জন্য একটি ফ্যালব্যাক পদ্ধতি (# ব্যবহার করে) সমর্থন করে।

এই গ্রন্থাগারটি মূলত `ইতিহাস.pushState 'এর আশেপাশে একটি পলিফিল।

Comments

অসাধারণ! আপনি কি এটি সমস্ত ব্রাউজার দিয়ে পরীক্ষা করেছেন ??

— সোনিক সোল

আমার বাস্তবায়ন আই 7 +, ফায়ারফক্স 3.6+, সাফারি 5 এবং ক্রোম 16+ এ পরীক্ষা করা হয়েছিল। এটি সম্ভবত অন্যান্য ব্রাউজারগুলির সাথেও কাজ করে, তবে এটি ব্যবহার করে মোতায়েন করা বেশ কয়েকটি সিস্টেমে আমার কোনও অভিযোগ নেই।

— ইয়ান নিউজন

মহান। এখনই ঠিক .. উইন্ডো.লোকেশন.আরেফ লেখার সময় কেবল একটি পরিবর্তে একটি # রেখে দেওয়া আমার পক্ষে কাজ করে। এটি পৃষ্ঠাটি পুনরায় লোড করে না। আমি নিশ্চিত যে আমি একবার এটি পরীক্ষা করে নেওয়ার পরে এটি ভেঙে যাবে .. আপনি যে প্রস্তাবিত লাইব্রেরিটি নিয়ে যাবেন আমি ঠিক সেই সময়েই যাব। ধন্যবাদ

— সোনিক সোল

# পদ্ধতিটি খুব ভাল যা এতে খুব প্রশস্ত ব্রাউজার সমর্থন রয়েছে। ইউআরএল এর # অংশ ব্রাউজার দ্বারা প্রেরিত না হওয়ায় আপনার সার্ভারের অনুরোধে সেই তথ্যটি অন্তর্ভুক্ত করার দরকার হলে বিষয়গুলি জটিল হয়ে উঠতে পারে। এর বিভিন্ন উপায় রয়েছে যার মধ্যে আমি উল্লেখ করেছি লাইব্রেরি রয়েছে। তদতিরিক্ত, এইচটিএমএল 5 ইতিহাস এপিআই ব্যবহার করা আপনার ইউআরএলগুলিকে সামগ্রিকভাবে খাটো করে তুলতে সহায়তা করে এবং রাষ্ট্রটি পুনরুদ্ধার করতে ক্লায়েন্টের পক্ষে কম কাজ প্রয়োজন requires

— ইয়ান নিউজন

# পদ্ধতিটি সামাজিক যোগাযোগমাধ্যমে ভাগ করে নেওয়ার ক্ষেত্রেও সমস্যাযুক্ত; প্রাকদর্শন বা ভাগ করে আবার লিঙ্ক তৈরি করার সময় টুইটার, ফেসবুক এবং সম্ভবত অন্যরা অ্যাঙ্কর ট্যাগগুলির সাথে ভাল খেলেন না।

— mirth23

Answer 4

আমি ফ্যাবিওর উত্তরটি উন্নত করতে এবং একটি ফাংশন তৈরি করতে চাই যা পৃষ্ঠাটি পুনরায় লোড না করে URL স্ট্রিংয়ে কাস্টম কী যুক্ত করে।

function insertUrlParam(key, value) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }
}

Answer 5

তারপরে হিস্টি এপিআই হ'ল আপনি যা সন্ধান করছেন। আপনি যদি লিগ্যাসি ব্রাউজারগুলিকেও সমর্থন করতে চান তবে ব্রাউজার যদি ইতিহাসের এপিআই সরবরাহ না করে থাকে তবে URL এর হ্যাশ ট্যাগটি চালিয়ে নেওয়ার পিছনে পড়ে এমন একটি লাইব্রেরি সন্ধান করুন।