ইতিহাস.প্লেস স্টেট () উদাহরণ?

127

কেউ কি ইতিহাসের ইতিহাসের জন্য কাজের উদাহরণ দিতে পারে? এই কি w3.org বলেছেন:

history . replaceState(data, title [, url ] )

প্রদত্ত ডেটা, শিরোনাম এবং যদি সরবরাহ করা হয় এবং শূন্য না হয় তবে ইউআরএল সেশন ইতিহাসে বর্তমান এন্ট্রি আপডেট করে।

হালনাগাদ:

এটি নিখুঁতভাবে কাজ করে:

history.replaceState( {} , 'foo', '/foo' );

Url পরিবর্তন হচ্ছে, কিন্তু শিরোনাম পরিবর্তন হচ্ছে না। এটি কি কোনও বাগ বা আমি কিছু মিস করছি? সর্বশেষ ক্রোমে পরীক্ষিত।

javascript ajax html

— Serjas
সূত্র

3

আমি সাধারণত জাভাস্ক্রিপ্ট প্রশ্নের জন্য অ্যাড-অন লাইব্রেরিগুলিকে চাপ দিই না, তবে এই ক্ষেত্রে আমি একটি ব্যতিক্রম করব make History.js গ্রন্থাগার একটি ছোট shim যে আধুনিক ব্রাউজারে জুড়ে ইতিহাস API এ উদ্ভট অশোভন আচরণ অনেকটা আপ সাফ করে। এটি এমনকি IE এর পুরানো সংস্করণগুলির জন্য supportচ্ছিক সমর্থন সরবরাহ করে।

— পয়েন্টি

2

এমডিএন ব্রাউজারের ইতিহাস ম্যানিপুলেট করার

— ই

@Pointy ইতিহাস.js দুর্দান্ত কাজ করে। আমি আমার প্রশ্নে কোডটি আপডেট করেছি। আমার সমস্যা নেই আমি ব্রাউজারের ব্যাক বোতামটি নিয়ে আগের পৃষ্ঠায় ফিরে যেতে

— পারছি না

3

মজিলার মতে , titleপ্যারামিটারটি আসলে ব্যবহার করা হয়নি।

— রকেট হাজমত

3

প্রথম উত্তরটি সত্যই গ্রহণযোগ্য উত্তর হওয়া উচিত নয়, প্রশ্নটি replaceStateউদাহরণ হিসাবে জিজ্ঞাসা করে , এবং গৃহীত উত্তর কোনওভাবেই replaceStateউদাহরণ নয়।

— CorayThan

68

আসলে এটি একটি বাগ, যদিও এখন 2 বছরের জন্য ইচ্ছাকৃত। সমস্যাটি কিছু অস্পষ্ট চশমা এবং কখন document.titleএবং পিছনে / ফরোয়ার্ড জড়িত সেগুলির মধ্যে জটিল ।

বাগ রেফারেন্স দেখুন ওয়েবকিট এবং মোজিলা । ইতিহাসের এপিআই প্রবর্তনের বিষয়ে অপেরা বলেছিল যে এটি শিরোনাম প্যারামিটার ব্যবহার করছে না এবং সম্ভবত এখনও তা ব্যবহার করে না।

বর্তমানে পুশস্টেট এবং রিপ্লেসমেটের দ্বিতীয় তর্ক - ইতিহাসের প্রবেশের শিরোনাম - অপেরার বাস্তবায়নে ব্যবহৃত হয়নি, তবে এটি একদিন হতে পারে।

সম্ভাব্য সমাধান

আমি দেখতে পাচ্ছি একমাত্র উপায় শিরোনাম উপাদান পরিবর্তন এবং পরিবর্তে পুসস্টেট ব্যবহার:

document.getElementsByTagName('title')[0].innerHTML = 'bar';
window.history.pushState( {} , 'bar', '/bar' );

— Sev:
সূত্র

Jquery ব্যবহারকারীদের জন্য .. চেষ্টা করুন $ ("শিরোনাম")। Html (_ শিরোনাম);

— সুরজ জেইন

3

এর ফলে ব্যবহারকারীরা আপনি এটি কীভাবে প্রয়োগ করেন তার উপর নির্ভর করে পিছনে বোতামটি "ডাবল ক্লিক" করতে হবে। সহজ কোনো সলিউশন খোঁজেন ব্যবহার করা চালিয়ে যেতে হতে পারে replaceState()কেবল নিজে নথির শিরোনাম সেটdocument.title = "title"

— newshorts

38

এখানে একটি ন্যূনতম, স্বীকৃত উদাহরণ।

console.log( window.location.href );  // whatever your current location href is
window.history.replaceState( {} , 'foo', '/foo' );
console.log( window.location.href );  // oh, hey, it replaced the path with /foo

আরও কিছু আছে replaceState()তবে আমি ঠিক জানি না এটি হ'ল আপনি এটিটি করতে চান।

— ট্রট
সূত্র

2

ইউআরএল পরিবর্তন হচ্ছে, তবে শিরোনাম পরিবর্তন হচ্ছে না .. সর্বশেষ ক্রোম @ ট্রট দিয়ে পরীক্ষা করা হয়েছে

— সার্জাস

6

@ সার্জাস titleপ্যারামিটারটি replaceState()আমার ব্রাউজারে উপেক্ষা করা আমার জ্ঞানের সেরা to

— ট্রট

10

history.pushStateইতিহাসের স্ট্যাকের উপরে বর্তমান পৃষ্ঠার স্থিতি চাপায় এবং অ্যাড্রেস বারে ইউআরএল পরিবর্তন করে। সুতরাং, যখন আপনি ফিরে যাবেন, সেই রাষ্ট্রটি (আপনি যে জিনিসটি দিয়েছিলেন) আপনাকে ফিরিয়ে দেওয়া হবে।

বর্তমানে, এটি সবই করে। নতুন পৃষ্ঠা প্রদর্শন করা বা পৃষ্ঠার শিরোনাম পরিবর্তন করার মতো অন্য কোনও পৃষ্ঠার ক্রিয়া আপনার দ্বারা করা আবশ্যক।

আপনার লিঙ্ক করা ডাব্লু 3 সি স্পেসটি কেবল একটি খসড়া, এবং ব্রাউজার এটি অন্যভাবে প্রয়োগ করতে পারে। উদাহরণস্বরূপ, ফায়ারফক্সtitle প্যারামিটারটিকে সম্পূর্ণ উপেক্ষা করে ।

এখানে pushStateআমি আমার ওয়েবসাইটে ব্যবহার করি তার একটি সাধারণ উদাহরণ ।

(function($){
    // Use AJAX to load the page, and change the title
    function loadPage(sel, p){
        $(sel).load(p + ' #content', function(){
            document.title = $('#pageData').data('title');
        });
    }

    // When a link is clicked, use AJAX to load that page
    // but use pushState to change the URL bar
    $(document).on('click', 'a', function(e){
        e.preventDefault();
        history.pushState({page: this.href}, '', this.href);
        loadPage('#frontPage', this.href);
    });

    // This event is triggered when you visit a page in the history
    // like when yu push the "back" button
    $(window).on('popstate', function(e){
        loadPage('#frontPage', location.pathname);
        console.log(e.originalEvent.state);
    });
}(jQuery));

— রকেট হাজমত
সূত্র

29

গৃহীত উত্তরগুলি "রিপ্লেসস্টেট" এর পরিবর্তে "পুশস্টেট" ব্যাখ্যা করে কেন?

— জিওয়র্গগোস সোপানোগ্লৌ

1

@ জিওয়র্গগোস সোপানোগ্লো: আমি এর জবাব এক বছর আগে দিয়েছি, সুতরাং আমি কেন নিশ্চিত নই :- পি যাইহোক, replaceStateবর্তমান পৃষ্ঠার অবস্থা পরিবর্তন করে। এটি আপনাকে বর্তমান পৃষ্ঠার রাজ্যের রাজ্য অবজেক্ট এবং URL পরিবর্তন করতে দেয় change

— রকেট হাজমত

2

এটি ঠিকই অদ্ভুত ছিল যে আমি রিপ্লেস স্টেট সম্পর্কিত তথ্য খুঁজছিলাম এবং আমি পুশস্টেট সম্পর্কে পড়া শেষ করেছি: পি

— জিগ্রোগস সোপানোগ্লো

6

উদাহরণ দেখুন

window.history.replaceState({
    foo: 'bar'
}, 'Nice URL Title', '/nice_url');

window.onpopstate = function (e) {
    if (typeof e.state == "object" && e.state.foo == "bar") {
        alert("Blah blah blah");
    }
};

window.history.go(-1);

এবং অনুসন্ধান location.hash;

— avalkab
সূত্র

2

দ্বিতীয় যুক্তি শিরোনামের অর্থ পৃষ্ঠার শিরোনাম নয় - এটি পৃষ্ঠার অবস্থার জন্য একটি সংজ্ঞা / তথ্য বেশি

তবে আমরা এখনও অনপপস্টেট ইভেন্ট ব্যবহার করে শিরোনাম পরিবর্তন করতে পারি , এবং শিরোনামের নামটি দ্বিতীয় যুক্তি থেকে নয়, প্রথম পরামিতি থেকে একটি গুণ হিসাবে অবজেক্ট হিসাবে পাস করেছি

তথ্যসূত্র: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

— মহেশ
সূত্র

2

এমডিএন হিস্ট্রি ডকের মতে
সেখানে স্পষ্টভাবে বলা হয়েছে যে দ্বিতীয় তর্কটি ভবিষ্যতের জন্য ব্যবহৃত হয় না এখনকার জন্য। আপনি ঠিক বলেছেন যে দ্বিতীয় তর্কটি ওয়েব-পৃষ্ঠা শিরোনামের সাথে চুক্তি করা হয়েছে তবে বর্তমানে এটি সমস্ত বড় ব্রাউজার দ্বারা উপেক্ষা করা হয়েছে।

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

— মুনির খাকি
সূত্র

দ্বিতীয় যুক্তি নেই না ওয়েব-পৃষ্ঠার শিরোনাম পড়ুন - MDN করা দস্তাবেজটি আপনি লিঙ্ক বলছেন "একটি সংক্ষিপ্ত পাস রাষ্ট্রপক্ষে শিরোনাম যা আপনি চলন্ত করছি।" । এটি ডাব্লু 3 সি ইতিহাসের ইন্টারফেস ডকুমেন্টেশনের সাথে একমত হয়েছে "প্রদত্ত ডেটাটি প্রদত্ত শিরোনাম সহ সেশন ইতিহাসের দিকে ঠেলে দেয়" । এই বাক্যাংশের ডেটা হ'ল রাষ্ট্রীয় ডেটা, সুতরাং আবার শিরোনামটি রাষ্ট্রকে (ডেটা) বোঝায়।

— স্টিফেন পি

1

আমি সত্যিই @ সেভির উত্তরটি প্রতিক্রিয়া জানাতে চাইছিলাম।

সেভ ঠিক আছে, এর ভিতরে একটি বাগ রয়েছে window.history.replaceState

এটি ঠিক করার জন্য ম্যানুয়ালি শিরোনাম সেট করতে কনস্ট্রাক্টরকে পুনরায় লিখুন।

var replaceState_tmp = window.history.replaceState.constructor;
window.history.replaceState.constructor = function(obj, title, url){
    var title_ = document.getElementsByTagName('title')[0];
    if(title_ != undefined){
        title_.innerHTML = title;
    }else{
        var title__ = document.createElement('title');
        title__.innerHTML = title;
        var head_ = document.getElementsByTagName('head')[0];
        if(head_ != undefined){
            head_.appendChild(title__);
        }else{
            var head__ = document.createElement('head');
            document.documentElement.appendChild(head__);
            head__.appendChild(title__);
        }
    }
    replaceState_tmp(obj,title, url);
}

— আশ্চর্যজনক
সূত্র

2

এটা করবেন না। ওভার রাইটিং ডিফল্ট ফাংশনগুলি হ'ল রিয়ালি খারাপ স্টাইল

— রেনি রথ

3

আপনার যখন এই বাগটি ঠিক করা দরকার তখন আপনি আর কী পরামর্শ দেন?

— গ্লেন প্লাস

@ গ্লেনপ্লাস প্রতিক্রিয়া রেপুর বিরুদ্ধে একটি পিআর খুলুন :)

— শূন্য_কুল

0

ধরুন https://www.mozilla.org/foo.html নিম্নলিখিত জাভাস্ক্রিপ্ট কার্যকর করে:

const stateObj = { foo: 'bar' };

history.pushState(stateObj, '', 'bar.html');

এটি ইউআরএল বারটি https://www.mozilla.org/bar2.html প্রদর্শন করতে পারে, তবে ব্রাউজারটি বার 2 এইচটিএমএল লোড করতে বা বার 2 এইচটিএমএল উপস্থিত রয়েছে কিনা তা পরীক্ষা করবে না।

— আশিস
সূত্র