কোনও ব্যবহারকারী পিছনের বোতামটি ব্যবহার করে কোনও পৃষ্ঠায় পৌঁছেছে তা আমি কীভাবে সনাক্ত করব?

Question 1

এই প্রশ্নটি ট্র্যাকের অনুরূপ যখন ব্যবহারকারী ব্রাউজারে ব্যাক বোতামটি হিট করে তবে একই নয় ... আমার একটি সমাধান রয়েছে এবং রেফারেন্স এবং প্রতিক্রিয়ার জন্য এটি এখানে পোস্ট করছি। কারও যদি আরও ভাল বিকল্প থাকে তবে আমি সব কান!

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

বিষয়টি হ'ল যদি:

পৃষ্ঠাটি বিবরণ ছাড়াই লোড করা হয়
একটি বিবরণ ব্যবহারকারী দ্বারা যুক্ত করা হয়
পৃষ্ঠাটিতে একটি লিঙ্ক ক্লিক করে দূরে নেভিগেট করা হয়
ব্যবহারকারী পিছনে বোতাম ক্লিক করে

তারপরে যা প্রদর্শিত হবে (ব্রাউজারের ক্যাশে থেকে) নতুন বর্ণনামূলকভাবে পরিবর্তনশীল ডিআইভি ছাড়াই পৃষ্ঠার সংস্করণ।

এটি মোটামুটি একটি বড় সমস্যা কারণ ব্যবহারকারীরা ধরে নিয়েছে যে তাদের আপডেটটি হারিয়ে গেছে এবং পরিবর্তনগুলি দেখার জন্য তাদের পৃষ্ঠাটি রিফ্রেশ করার দরকার পড়বে না arily

সুতরাং, প্রশ্নটি হল: আপনি কোনও পৃষ্ঠা লোড হওয়ার পরে সংশোধন করা হিসাবে কীভাবে পতাকাঙ্কিত করতে পারেন এবং তারপরে ব্যবহারকারী কখন "এটিতে ফিরে যায়" এবং সেই পরিস্থিতিতে একটি রিফ্রেশকে বাধ্য করতে পারেন?

Question 2

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

<form name="ignore_me">
    <input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" />
</form>

আপনার জাভাস্ক্রিপ্টে আপনার নিম্নলিখিতগুলির প্রয়োজন হবে:

var dirty_bit = document.getElementById('page_is_dirty');
if (dirty_bit.value == '1') window.location.reload();
function mark_page_dirty() {
    dirty_bit.value = '1';
}

এইচটিএমএল সম্পূর্ণরূপে বিশ্লেষণের পরে যে জেএসটি ফর্মটি স্নিগ্ধ করে তা কার্যকর করতে হয় তবে আপনি যদি ফর্ম এবং জেএস উভয় পৃষ্ঠার শীর্ষে (জেএস সেকেন্ড) উভয়ই রাখতে পারেন যদি ব্যবহারকারীর বিলম্বিতা গুরুতর উদ্বেগ হয়।

Question 3

এই পুরানো সমস্যার একটি খুব সহজ আধুনিক সমাধান এখানে।

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
    alert('Got here using the browser "Back" or "Forward" button.');
}

উইন্ডো.পারফরম্যান্স বর্তমানে সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত।

Question 4

এই নিবন্ধটি এটি ব্যাখ্যা করে। নীচের কোডটি দেখুন: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

<html>
    <head>
        <script>

            function pageShown(evt){
                if (evt.persisted) {
                    alert("pageshow event handler called.  The page was just restored from the Page Cache (eg. From the Back button.");
                } else {
                    alert("pageshow event handler called for the initial load.  This is the same as the load event.");
                }
            }

            function pageHidden(evt){
                if (evt.persisted) {
                    alert("pagehide event handler called.  The page was suspended and placed into the Page Cache.");
                } else {
                    alert("pagehide event handler called for page destruction.  This is the same as the unload event.");
                }
            }

            window.addEventListener("pageshow", pageShown, false);
            window.addEventListener("pagehide", pageHidden, false);

        </script>
    </head>
    <body>
        <a href="http://www.webkit.org/">Click for WebKit</a>
    </body>
</html>

Question 5

আধুনিক ব্রাউজারগুলির জন্য, এটি এখন সঠিক উপায় বলে মনে হচ্ছে:

const perfEntries = performance.getEntriesByType('navigation');
if (perfEntries.length && perfEntries[0].type === 'back_forward') {
  console.log('User got here from Back or Forward button.');
}

এটি 2020 সালের জানুয়ারির মতো এখনও "পরীক্ষামূলক", তবে মনে হয় এটি বেশ সমর্থনযোগ্য।

https://developer.mozilla.org/en-US/docs/Web/API/ পারফরম্যানেশন নেভিগেশন সময় নির্ধারণ

Question 6

উপরে উল্লিখিত হিসাবে, আমি একটি সমাধান খুঁজে পেয়েছি এবং এটি এখানে রেফারেন্স এবং প্রতিক্রিয়ার জন্য পোস্ট করছি।

সমাধানের প্রথম পর্যায়ে হ'ল পৃষ্ঠাটিতে নিম্নলিখিতগুলি যুক্ত করা:

<!-- at the top of the content page -->
<IFRAME id="page_is_fresh" src="fresh.html" style="display:none;"></IFRAME>
<SCRIPT style="text/javascript">
  function reload_stale_page() { location.reload(); }
</SCRIPT>

সামগ্রীর বিষয়বস্তুগুলি fresh.htmlগুরুত্বপূর্ণ নয়, সুতরাং নিম্নলিখিতগুলির যথেষ্ট হওয়া উচিত:

<!-- fresh.html -->
<HTML><BODY></BODY></HTML>

যখন ক্লায়েন্টের সাইড কোডটি পৃষ্ঠাটি আপডেট করে, তখন এটি নীচে পরিবর্তিতভাবে পতাকাঙ্কিত করতে হবে:

function trigger_reload_if_user_clicks_back_button()
{
  // "dis-arm" the reload stale page function so it doesn't fire  
  // until the page is reloaded from the browser's cache
  window.reload_stale_page = function(){};

  // change the IFRAME to point to a page that will reload the 
  // page when it loads
  document.getElementById("page_is_fresh").src = "stale.html";
}

stale.htmlসমস্ত কাজ করে: এটি লোড হওয়ার পরে এটি reload_stale_pageফাংশনটি কল করবে যা প্রয়োজনীয় হলে পৃষ্ঠাটি রিফ্রেশ করবে। এটি প্রথমবার লোড হওয়ার পরে (অর্থাত্ সংশোধন করার পরে, reload_stale_pageফাংশনটি কিছুই করবে না))

<!-- stale.html -->
<HTML><BODY>
<SCRIPT type="text/javascript">window.parent.reload_stale_page();</SCRIPT>
</BODY></HTML>

এই পর্যায়ে আমার (সর্বনিম্ন) পরীক্ষা করা থেকে, এটি পছন্দসই হিসাবে কাজ করে বলে মনে হচ্ছে। আমি কি কিছু উপেক্ষা করেছি?

Question 7

আপনি onfeforeunload ইভেন্টটি ব্যবহার করে এটি সমাধান করতে পারেন :

window.onbeforeunload = function () { }

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

একটি হচ্ছে onbeforeunload খালি ইভেন্ট ম্যানেজার ফাংশন মানে পৃষ্ঠা হবে প্রতি একক সময় এটা অ্যাক্সেস করা হয় পুনরায় নির্মাণ করা। জাভাস্ক্রিপ্টগুলি আবার চালানো হবে, সার্ভার-সাইড স্ক্রিপ্টগুলি আবার চালানো হবে, পৃষ্ঠাটি এমনভাবে তৈরি করা হবে যেন ব্যবহারকারী প্রথমবারের মতো এটি আঘাত করছে, এমনকি যদি ব্যবহারকারী কেবল পেছনে বা ফরোয়ার্ড বোতামটি আঘাত করে পৃষ্ঠাটিতে পৌঁছেছে if ।

এখানে একটি উদাহরণ পূর্ণ কোড:

<html>
<head>
<title>onbeforeunload.html</title>
<script>
window.onbeforeunload = function () { }

function myfun()
{
   alert("The page has been refreshed.");
}
</script>

<body onload="myfun()">

Hello World!<br>

</body>
</html>

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

এটি ব্যবহার করে দেখুন, এই পৃষ্ঠাটি নেভিগেট করুন এবং তারপরে আপনার ব্রাউজারে "পিছনে" বা "ফরোয়ার্ড" বোতাম ব্যবহার করে ফিরে আসুন।

এটি আইই, এফএফ এবং ক্রোমে দুর্দান্ত কাজ করে।

অবশ্যই আপনি মাইফুন ফাংশনের ভিতরে যা খুশি করতে পারেন ।

আরও তথ্য: http://www.hunlock.com/blogs/ মাস্টারিং_এই_ব্যাক_বটন_ওয়াত_ জাভাস্ক্রিপ্ট

Question 8

আপনি একটি পতাকা নির্ধারণ করতে (কোনও লুকানো ফর্ম ব্যবহার না করে) স্থানীয় স্টোরেজ বা সেশনসটরেজ ( http://www.w3schools.com/html/html5_webstorage.asp ) ব্যবহার করতে পারেন ।

Question 9

এই পৃষ্ঠাটি ব্যবহার করে, বিশেষত @ নিক হোয়াইট এবং এই পৃষ্ঠাটির উত্তর সম্পর্কে @ সজিথের মন্তব্যটি সংযুক্ত করে: http://www.mrc-productivity.com/techblog/?p=1235

<form name="ignore_me" style="display:none">
    <input type="text" id="reloadValue" name="reloadValue" value="" />
</form>

$(function ()
{
    var date = new Date();
    var time = date.getTime();

    if ($("#reloadValue").val().length === 0)
    {
        $("#reloadValue").val(time);
    }
    else
    {
        $("#reloadValue").val("");
        window.location.reload();
    }
});

Question 10

এখানে একটি jQuery সংস্করণ। যখন কোনও সাফারি ডেস্কটপ / মোবাইল ক্যাশে হ্যান্ডেল করে যখন কোনও ব্যবহারকারী পিছনের বোতামটি চাপায় তখন আমি এটি কয়েকবার ব্যবহার করার প্রয়োজনে পড়েছি।

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        // Loading from cache
    }
});

Question 11

আমি আজ একই ধরণের সমস্যায় পড়েছি এবং আমি এটি স্থানীয় স্টোরেজ দিয়ে সমাধান করেছি (এখানে কিছুটা jQuery দিয়ে):

$(function() {

    if ($('#page1').length) {
        // this code must only run on page 1

        var checkSteps = function () {
            if (localStorage.getItem('steps') == 'step2') {
                // if we are here, we know that:
                // 1. the user is on page 1
                // 2. he has been on page 2
                // 3. this function is running, which means the user has submitted the form
                // 4. but steps == step2, which is impossible if the user has *just* submitted the form
                // therefore we know that he has come back, probably using the back button of his browser
                alert('oh hey, welcome back!');
            } else {
                setTimeout(checkSteps, 100);
            }
        };

        $('#form').on('submit', function (e) {
            e.preventDefault();
            localStorage.setItem('steps', 'step1'); // if "step1", then we know the user has submitted the form
            checkOrderSteps();
            // ... then do what you need to submit the form and load page 2
        });
    }

    if ($('#page2').length) {
        // this code must only run on page 2
        localStorage.setItem('steps', 'step2');
    }

});

মূলত সি:

পৃষ্ঠা 1 এ, যখন ব্যবহারকারী ফর্মটি জমা দেয়, ব্যবহারকারী কী পদক্ষেপ নিয়েছে তা নির্দেশ করার জন্য আমরা লোকালস্টোরারে একটি মান "পদক্ষেপ" সেট করি। একই সময়ে, আমরা সময়সীমা সহ একটি ফাংশন চালু করি যা পরীক্ষা করে দেখবে যে এই মানটি পরিবর্তন হয়েছে (উদাহরণস্বরূপ 10 বার / সেকেন্ড)।

পৃষ্ঠায় 2, আমরা অবিলম্বে মান মান পরিবর্তন।

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