ক্রোমে পৃষ্ঠার লোডে পপস্টেট

Question 1

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

সমস্যাটি সুপরিচিত - ক্রোম এবং ফায়ারফক্স সেই পপস্টেট ইভেন্টটিকে অন্যরকম আচরণ করে। যদিও ফায়ারফক্স প্রথম লোডে এটি জ্বালিয়ে দেয় না, ক্রোম করে। আমি ফায়ারফক্স-স্টাইলটি রাখতে চাই এবং ইভেন্টটিকে লোডে না ছড়িয়ে দিতে পারি কারণ এটি ঠিক একই লোডের সাথে ফলাফলগুলি আপডেট করে। হিস্টরি.জে ব্যবহার না করে কি কোনও কার্যকারিতা রয়েছে ? আমি এটি ব্যবহার করার মতো বোধ করি না কারণ - এটি নিজে থেকেই অনেক বেশি জেএস লাইব্রেরি প্রয়োজন এবং যেহেতু আমার এটি ইতিমধ্যে খুব বেশি জেএস সহ কোনও সিএমএসে প্রয়োগ করা প্রয়োজন, আমি এতে জেএসকে কমিয়ে আনতে চাই ।

সুতরাং, ক্রোম লোড-এ 'পপস্টেট' না জ্বালানোর উপায় আছে কিনা তা জানতে চাই বা সম্ভবত, কোনও লাইব্রেরি একত্রে ফাইলে একসাথে ইতিহাস.js ব্যবহার করার চেষ্টা করেছিল।

Question 2

গুগল ক্রোমে 19 সংস্করণে @ স্প্লিটারের সমাধান কাজ করা বন্ধ করে দিয়েছে। @ জোহনিমায়ার যেমন উল্লেখ করেছেন, ক্রোম ১৯-এ ইতিহাসের ইতিহাস উপস্থিত রয়েছে, তবে এটি বাতিল।

আমার কাজটি হ'ল উইন্ডো হিস্ট্রি.স্টেট যুক্ত করা! == উইন্ডো হিস্টোরিতে রাষ্ট্রের উপস্থিতি আছে কিনা তা পরীক্ষা করে দেখার জন্য নালালি:

var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

আমি এটি সমস্ত বড় ব্রাউজারগুলিতে এবং ক্রোম সংস্করণ 19 এবং 18 তে পরীক্ষা করেছি It দেখে মনে হচ্ছে এটি কাজ করে।

Question 3

আপনি অনপপস্টেটে যে প্রতিটি হ্যান্ডলারের সাথে বিশেষ যোগ করতে চান না সে ক্ষেত্রে, আমার সমাধানটি আপনার জন্য আকর্ষণীয় হতে পারে। এই সমাধানের একটি বড় প্লাসটি হ'ল পৃষ্ঠা লোডিং শেষ হওয়ার আগে অনপপস্টেট ইভেন্টগুলি পরিচালনা করা যায়।

কোনও অনপপস্টেট হ্যান্ডলার যুক্ত করার আগে একবার এই কোডটি চালান এবং প্রত্যাশার সাথে সবকিছু কাজ করা উচিত (ওরফে মজিলা like এর মতো) ।

(function() {
    // There's nothing to do for older browsers ;)
    if (!window.addEventListener)
        return;
    var blockPopstateEvent = document.readyState!="complete";
    window.addEventListener("load", function() {
        // The timeout ensures that popstate-events will be unblocked right
        // after the load event occured, but not in the same event-loop cycle.
        setTimeout(function(){ blockPopstateEvent = false; }, 0);
    }, false);
    window.addEventListener("popstate", function(evt) {
        if (blockPopstateEvent && document.readyState=="complete") {
            evt.preventDefault();
            evt.stopImmediatePropagation();
        }
    }, false);
})();

কিভাবে এটা কাজ করে:

ডকুমেন্টটি লোড হয়ে গেলে ~~ক্রোম~~ , সাফারি এবং সম্ভবত অন্যান্য ওয়েবকিট ব্রাউজারগুলি অনপপস্টেট ইভেন্টে আগুন জ্বালিয়ে দেয়। এটি উদ্দেশ্যযুক্ত নয়, সুতরাং ডকুমেন্টটি লোড হওয়ার পরে প্রথম ইভেন্টের লুপ কিকাল না হওয়া পর্যন্ত আমরা পপস্টেট ইভেন্টগুলি অবরুদ্ধ করি। এটি প্রতিরোধ-ডিফল্ট এবং স্টপআইমিডিয়েট্রোপেজেশন কলগুলি দ্বারা করা হয় (স্টপপ্রোপেশন স্টপের বিপরীতেআইমিডিয়েটপ্রপাগেশন সমস্ত ইভেন্ট হ্যান্ডলার কল তাত্ক্ষণিকভাবে থামিয়ে দেয়)।

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

আপডেট 2014-04-23: পৃষ্ঠাটি লোড হওয়ার পরে স্ক্রিপ্টটি কার্যকর করা হলে পপস্টেট ইভেন্টগুলি ব্লক করা হয়েছে এমন একটি বাগ স্থির করে।

Question 4

সেটটাইমআউট ব্যবহার করা কেবলমাত্র সঠিক সমাধান নয় কারণ আপনার কোনও ধারণা নেই যে সামগ্রীটি লোড হতে কত সময় লাগবে তাই পপস্টেট ইভেন্টের সময়সীমা শেষ হওয়ার পরে এটি সম্ভব।

এখানে আমার সমাধান: https://gist.github.com/3551566

/*
* Necessary hack because WebKit fires a popstate event on document load
* https://code.google.com/p/chromium/issues/detail?id=63040
* https://bugs.webkit.org/process_bug.cgi
*/
window.addEventListener('load', function() {
  setTimeout(function() {
    window.addEventListener('popstate', function() {
      ...
    });
  }, 0);
});

Question 5

সমাধান jquery.pjax.js লাইনে 195-225 পাওয়া গেছে :

// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history), initialURL = location.href


// popstate handler takes care of the back and forward buttons
//
// You probably shouldn't use pjax on pages with other pushState
// stuff yet.
$(window).bind('popstate', function(event){
  // Ignore inital popstate that some browsers fire on page load
  var initialPop = !popped && location.href == initialURL
  popped = true
  if ( initialPop ) return

  var state = event.state

  if ( state && state.pjax ) {
    var container = state.pjax
    if ( $(container+'').length )
      $.pjax({
        url: state.url || location.href,
        fragment: state.fragment,
        container: container,
        push: false,
        timeout: state.timeout
      })
    else
      window.location = location.href
  }
})

Question 6

রিজিমুলেশনিং পাইজ্যাক্সের চেয়ে আরও সরাসরি সমাধানটি পুশস্টেটে একটি পরিবর্তনশীল সেট করা হয় এবং পপস্টেটে ভেরিয়েবলটি পরীক্ষা করে দেখানো হয়, তাই প্রাথমিক পপস্টেটটি ভারসাম্যহীনভাবে লোড জ্বালিয়ে দেয় না (কেবল ইভেন্টের জন্য এটি ব্যবহার করে জ্যাকারি-নির্দিষ্ট সমাধান নয়):

$(window).bind('popstate', function (ev){
  if (!window.history.ready && !ev.originalEvent.state)
    return; // workaround for popstate on load
});

// ... later ...

function doNavigation(nextPageId) {
  window.history.ready = true;

  history.pushState(state, null, 'content.php?id='+ nextPageId); 
  // ajax in content instead of loading server-side
}

Question 7

ওয়েবকিটের প্রাথমিক অনপপস্টেট ইভেন্টের কোনও রাজ্য বরাদ্দ নেই, তাই আপনি এটি অযাচিত আচরণের জন্য যাচাই করতে পারেন:

window.onpopstate = function(e){
    if(e.state)
        //do something
};

মূল পৃষ্ঠায় ফিরে নেভিগেশনকে মঞ্জুরি দেওয়ার জন্য একটি বিস্তৃত সমাধান এই ধারণাটি তৈরি করবে:

<body onload="init()">
    <a href="page1" onclick="doClick(this); return false;">page 1</a>
    <a href="page2" onclick="doClick(this); return false;">page 2</a>
    <div id="content"></div>
</body>

<script>
function init(){
   openURL(window.location.href);
}
function doClick(e){
    if(window.history.pushState)
        openURL(e.getAttribute('href'), true);
    else
        window.open(e.getAttribute('href'), '_self');
}
function openURL(href, push){
    document.getElementById('content').innerHTML = href + ': ' + (push ? 'user' : 'browser'); 
    if(window.history.pushState){
        if(push)
            window.history.pushState({href: href}, 'your page title', href);
        else
            window.history.replaceState({href: href}, 'your page title', href);
    }
}
window.onpopstate = function(e){
    if(e.state)
        openURL(e.state.href);
};
</script>

যদিও এটি এখনও দু'বার জ্বলতে পারে (কিছু নিফটি নেভিগেশন সহ) তবে এটি পূর্ববর্তী href এর বিরুদ্ধে চেক করে কেবল পরিচালনা করা যেতে পারে।

Question 8

এটি আমার কাজ

window.setTimeout(function() {
  window.addEventListener('popstate', function() {
    // ...
  });
}, 1000);

Question 9

এখানে আমার সমাধান:

var _firstload = true;
$(function(){
    window.onpopstate = function(event){
        var state = event.state;

        if(_firstload && !state){ 
            _firstload = false; 
        }
        else if(state){
            _firstload = false;
            // you should pass state.some_data to another function here
            alert('state was changed! back/forward button was pressed!');
        }
        else{
            _firstload = false;
            // you should inform some function that the original state returned
            alert('you returned back to the original state (the home state)');
        }
    }
})

Question 10

কোনও পৃষ্ঠা লোডে ক্রপ পপস্টেটে না ফেলার সর্বোত্তম উপায় হল https://code.google.com/p/chromium/issues/detail?id=63040 । তারা জেনে গেছে যে ক্রোম এখন পুরো দুটি বছর ধরে এইচটিএমএল 5 টি অনুপস্থিতিতে অনুসরণ করে না এবং এখনও এটি ঠিক করে নি!

Question 11

ব্যবহারের ক্ষেত্রে event.state !== nullইতিহাসে প্রথম ফিরে আসা পৃষ্ঠাতে ফিরে আসা অ মোবাইল ব্রাউজারগুলিতে কাজ করবে না। আমি যখন এজ্যাক্স নেভিগেশন সত্যিই শুরু হয় তখন চিহ্নিত করতে আমি সেশনস্টোরেজ ব্যবহার করি।

history.pushState(url, null, url);
sessionStorage.ajNavStarted = true;

window.addEventListener('popstate', function(e) {
    if (sessionStorage.ajNavStarted) {
        location.href = (e.state === null) ? location.href : e.state;
    }
}, false);

স্নিপেট প্রসারিত করুন

Question 12

উপস্থাপিত সমাধানগুলিতে পৃষ্ঠা পুনরায় লোড করার ক্ষেত্রে একটি সমস্যা রয়েছে। নিম্নলিখিতটি আরও ভাল কাজ করছে বলে মনে হচ্ছে, তবে আমি কেবল ফায়ারফক্স এবং ক্রোম পরীক্ষা করেছি। এটি বাস্তবতা ব্যবহার করে, মনে হয় যে e.event.stateএবং এর মধ্যে পার্থক্য রয়েছে window.history.state।

window.addEvent('popstate', function(e) {
    if(e.event.state) {
        window.location.reload(); // Event code
    }
});

Question 13

আমি জানি আপনি এর বিপরীতে জিজ্ঞাসা করেছেন, তবে এটি মিলিয়ন ব্রাউজারের অসম্পূর্ণতাগুলি পরিষ্কার করার সাথে সাথে আপনার কেবল ইতিহাস.js ব্যবহার করা উচিত। আমি ম্যানুয়াল ফিক্স রুটটি কেবল পরে গিয়েছিলাম আরও অনেক বেশি সমস্যা ছিল যা আপনি কেবল রাস্তায় নামার পথটি খুঁজে পাবেন। আজকাল এটি আসলেই এতটা কঠিন নয়:

<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js" type="text/javascript"></script>

এবং এপিআইটি https://github.com/browserstate/history.js এ পড়ুন

Question 14

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

if (history && history.pushState) {
  setTimeout(function(){
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  },3000);
}

Question 15

আপনি কোনও ইভেন্ট তৈরি করতে পারেন এবং এটি আপনার লোড হ্যান্ডলারের পরে ফায়ার করতে পারেন।

var evt = document.createEvent("PopStateEvent");
evt.initPopStateEvent("popstate", false, false, { .. state object  ..});
window.dispatchEvent(evt);

দ্রষ্টব্য, এটি ক্রোম / সাফারিতে কিছুটা ভাঙা হয়েছে তবে আমি প্যাচটি ওয়েবকিটে জমা দিয়েছি এবং এটি শীঘ্রই পাওয়া উচিত, তবে এটি "সবচেয়ে সঠিক" উপায়।

Question 16

এটি আমার জন্য ফায়ারফক্স এবং ক্রোমে কাজ করেছে

window.onpopstate = function(event) { //back button click
    console.log("onpopstate");
    if (event.state) {
        window.location.reload();
    }
};