هل هناك حدث تحميل عبر المتصفحات عند النقر على زر الرجوع؟

https://stackoverflow.com/questions/158319

03-07-2019
|

سؤال

بالنسبة لجميع المتصفحات الرئيسية (باستثناء IE)، فإن JavaScript onload لا يتم إطلاق الحدث عند تحميل الصفحة كنتيجة لعملية زر الرجوع — يتم إطلاقه فقط عند تحميل الصفحة لأول مرة.

هل يمكن لأي شخص أن يوجهني إلى بعض نماذج التعليمات البرمجية عبر المتصفحات (Firefox، Opera، Safari، IE، ...) التي تحل هذه المشكلة؟أنا على دراية بفايرفوكس pageshow حدث ولكن لسوء الحظ لم ينفذ Opera ولا Safari ذلك.

المحلول

يا شباب، لقد وجدت أن JQuery له تأثير واحد فقط:تتم إعادة تحميل الصفحة عند الضغط على زر الرجوع.هذا ليس له علاقة ب"مستعد".

كيف يعمل هذا؟حسنًا، يضيف JQuery com.onunload مستمع الحدث

// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...

بشكل افتراضي، فإنه لا يفعل شيئا.ولكن يبدو أن هذا يؤدي بطريقة ما إلى إعادة التحميل في Safari وOpera وMozilla - بغض النظر عما يحتويه معالج الأحداث.

[تحرير (نيكولاي):هذا هو السبب في أنه يعمل بهذه الطريقة: webkit.org, Developer.mozilla.org.يرجى قراءة هذه المقالات (أو ملخصي في إجابة منفصلة أدناه) والتفكير فيما إذا كنت حقًا بحاجة إلى القيام بذلك وجعل تحميل صفحتك أبطأ للمستخدمين.]

لا أستطيع أن أصدق ذلك؟جرب هذا:

<body onunload=""><!-- This does the trick -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

سترى نتائج مماثلة عند استخدام JQuery.

قد ترغب في المقارنة مع هذا دون com.onunload

<body><!-- Will not reload on back button -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

نصائح أخرى

تدعم بعض المتصفحات الحديثة (Firefox وSafari وOpera، ولكن ليس Chrome) ذاكرة التخزين المؤقت الخاصة "للخلف/للأمام" (سأسميها bfcache، وهو مصطلح اخترعته Mozilla)، والتي يتم استخدامها عندما ينتقل المستخدم إلى الخلف.على عكس ذاكرة التخزين المؤقت العادية (HTTP)، فإنها تلتقط الحالة الكاملة للصفحة (بما في ذلك حالة JS وDOM).وهذا يسمح له بإعادة تحميل الصفحة بشكل أسرع تمامًا كما تركها المستخدم.

ال load ليس من المفترض أن يتم إطلاق الحدث عند تحميل الصفحة من ذاكرة التخزين المؤقت bfcache هذه.على سبيل المثال، إذا قمت بإنشاء واجهة المستخدم الخاصة بك في معالج "تحميل"، وتم إطلاق الحدث "تحميل" مرة واحدة عند التحميل الأولي، وفي المرة الثانية عند إعادة تحميل الصفحة من ذاكرة التخزين المؤقت bfcache، ستنتهي الصفحة بـ عناصر واجهة المستخدم المكررة.

وهذا أيضًا هو السبب في أن إضافة معالج "إلغاء التحميل" يؤدي إلى إيقاف تخزين الصفحة في ذاكرة التخزين المؤقت bfcache (مما يجعل الرجوع إليها أبطأ) - يمكن لمعالج الإلغاء تنفيذ مهام التنظيف، مما قد يترك الصفحة في حالة غير قابلة للعمل.

بالنسبة للصفحات التي تحتاج إلى معرفة متى يتم الانتقال إليها بعيدًا/رجوعًا إليها، Firefox 1.5+ وإصدار Safari مع الإصلاح لـ الخطأ 28758 دعم الأحداث الخاصة التي تسمى "عرض الصفحات" و"إخفاء الصفحات".

مراجع:

مجموعة الويب: http://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
ثعلب النار: https://developer.mozilla.org/En/Using_Firefox_1.5_caching.
كروم: https://code.google.com/p/chromium/issues/detail?id=2879

لقد واجهت مشكلة تتمثل في عدم تنفيذ js الخاص بي عندما قام المستخدم بالنقر للخلف أو للأمام.لقد شرعت أولاً في إيقاف المتصفح من التخزين المؤقت، ولكن لا يبدو أن هذه هي المشكلة.تم ضبط جافا سكريبت الخاص بي للتنفيذ بعد كل المكتبات وما إلى ذلك.تم تحميلها.لقد قمت بفحصها باستخدام حدث ReadyStateChange.

بعد إجراء بعض الاختبارات، اكتشفت أن الحالة الجاهزة للعنصر في الصفحة التي تم النقر فوقها مرة أخرى ليست "محملة" ولكنها "مكتملة".إضافة || element.readyState == 'complete' إلى بياني الشرطي حل مشاكلي.

اعتقدت أنني سأشارك النتائج التي توصلت إليها، وآمل أن تساعد شخصًا آخر.

تحرير للاكتمال

بدا الكود الخاص بي كما يلي:

script.onreadystatechange(function(){ 
   if(script.readyState == 'loaded' || script.readyState == 'complete') {
      // call code to execute here.
   } 
});

في نموذج التعليمات البرمجية أعلاه، كان متغير البرنامج النصي عبارة عن عنصر برنامج نصي تم إنشاؤه حديثًا وتمت إضافته إلى DOM.

حسنا، هنا هو الحل النهائي على أساس حل الأولي ckramer والمثال palehorse أن يعمل في جميع المتصفحات، بما في ذلك أوبرا. إذا قمت بتعيين history.navigationMode إلى "متوافقة" ثم وظيفة مسج على استعداد سوف يطلقون النار على العودة العمليات زر في الأوبرا، وكذلك المتصفحات الرئيسية الأخرى.

وهذه الصفحة على معلومات أكثر .

مثال:

history.navigationMode = 'compatible';
$(document).ready(function(){
  alert('test');
});

وأنا جربت هذا في أوبرا 9.5، IE7، FF3 وسفاري ويعمل في كل منها.

وأنا لم أستطع الحصول على الأمثلة المذكورة أعلاه للعمل. أنا ببساطة أراد أن يؤدي إلى تحديث بعض المناطق شعبة تعديل عند العودة إلى الصفحة عبر زر الرجوع. كانت خدعة I استخدامه لتعيين حقل إدخال مخفي (تسمى "بت القذرة") إلى 1 بأسرع ما تغيرت المناطق شعبة من الأصل. حقل إدخال مخفي يحتفظ فعلا قيمته عند النقر فوق ظهره، حتى ONLOAD أستطيع أن تحقق لهذا الشيء. إذا تم ضبطه، I تحديث الصفحة (أو مجرد تحديث عناصر div). على الحمولة الأصلي، ومع ذلك، لم يتم تعيين بعض الشيء، لذلك أنا لا نضيع الوقت تحميل الصفحة مرتين.

<input type='hidden' id='dirty'>

<script>
$(document).ready(function() {
  if ($('#dirty').val()) {
    // ... reload the page or specific divs only
  }
  // when something modifies a div that needs to be refreshed, set dirty=1
  $('#dirty').val('1');
});
</script>

وأنها قد تؤدي بشكل صحيح كلما نقرت على الزر الخلفي.

إذا أتذكر بحق، ثم إضافة حدث تفريغ () يعني أن الصفحة لا يمكن أن يكون مؤقتا (في ذاكرة التخزين المؤقت إلى الأمام / الخلف) - لأنها تتغير حالة / قد تتغير عندما يتنقل المستخدم بعيدا. لذلك - أنها ليست آمنة لاستعادة الدولة الثانية الأخيرة من الصفحة عند العودة إليها من خلال التنقل من خلال وجوه التاريخ

وأعتقد أن هذا سيكون ل "معالج onunload"، وليس تحميل الصفحة، لأن لا نتحدث عن اطلاق النار حدث عندما ضرب "العودة"؟ $ document.ready () غير لأحداث المطلوب على تحميل الصفحة، بغض النظر عن كيفية الوصول الى هذه الصفحة (أي توجيه، وفتح المتصفح لURL مباشرة، وما إلى ذلك)، وليس عند النقر على "العودة"، إلا إذا كنت تتحدث حول ما لاطلاق النار في الصفحة السابقة عند تحميل مرة أخرى. ولست متأكدا الصفحة لم يتم الحصول على مؤقتا ولقد وجدت أن جافاسكريبتس لا تزال، حتى عندما يتم تضمين $ document.ready () فيها. لقد كان علينا أن اضغط Ctrl + F5 عند تحرير النصوص في أن يكون هذا الحدث كلما كنا مراجعتها ونريد اختبار النتائج في صفحاتنا.

$(window).unload(function(){ alert('do unload stuff here'); });

وهذا ما كنت تريد لحدث معالج onunload عندما ضرب "العودة" والتفريغ الصفحة الحالية، وستطلق أيضا عند إغلاق مستخدم نافذة المتصفح. بدا هذا أشبه ما رغبت في ذلك، حتى إذا أنا فاقت مع $ document.ready) الردود (. أساسا الفرق بين الحدث إطلاق على الصفحة الحالية في حين انها إغلاق أو على واحد الذي يقوم بتحميل عند النقر على "العودة" كما انها تحميل. اختبار في IE 7 الغرامة، لا يمكن التحدث عن المتصفحات الأخرى كما لا يسمح لهم ما نحن فيه. ولكن هذا قد يكون خيار آخر.

وأستطيع أن أؤكد ckramer هذا الحدث مسج جاهزا يعمل في شركة آي إي وفايرفوكس. وفيما يلي عينة:

<html>
<head>
    <title>Test Page</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(document).ready(function () {
               var d = new Date();
               $('#test').html( "Hi at " + d.toString() );
            });
    </script>
</head>
<body>
    <div id="test"></div>
    <div>
        <a href="http://www.google.com">Go!</a>
    </div>
</body>
</html>

وبالنسبة للأشخاص الذين لا يريدون لاستخدام المكتبة مسج برمتها واستخراج التنفيذ في رمز منفصل. انها فقط 0،4 KB كبيرة.

ويمكنك العثور على رمز، جنبا إلى جنب مع البرنامج التعليمي الألمانية في هذا الويكي: <لأ href = "http://web.archive.org/web/20130417092220/http://www.easy-coding.de/wiki /html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html "يختلط =" نوفولو noreferrer "> http://www.easy-coding.de/wiki/html-ajax-und- شارك / ONLOAD الحدث، عبر متصفح kompatibler-domcontentloaded.html

مسج ل <لأ href = "http://docs.jquery.com/Events/ready#fn" يختلط = "نوفولو noreferrer"> تم إنشاء الحدث استعداد فقط لهذا النوع من القضية. قد تحتاج إلى حفر في تنفيذ لمعرفة ما يجري تحت الأغطية.

وبيل، أجرؤ على الإجابة على سؤالك، ولكن أنا لست متأكدا 100٪ مع التخمينات بلدي. أعتقد متصفحات IE أخرى ثم عندما أخذ المستخدم إلى صفحة في التاريخ وليس فقط تحميل الصفحة ومواردها من ذاكرة التخزين المؤقت لكنها لن استعادة أيضا DOM كامل (قراءة جلسة) دولة لذلك. IE لا تفعل استعادة DOM (أو في عقد الإيجار لم يفعل)، وبالتالي الحدث onload يبدو أنها ضرورية لمناسبة الصفحة إعادة التهيئة هناك.

وحاولت حل من بيل باستخدام $ (الوثيقة) .ready ... ولكن في البداية أنها لم تنجح. اكتشفت أنه إذا تم وضع السيناريو بعد المقطع أتش تي أم أل، فإنه لن ينجح. إذا كان هذا هو رئيس قسم أنها ستعمل ولكن فقط في IE. السيناريو لا يعمل في فايرفوكس.

وOK، حاولت ذلك، وأنها تعمل في فايرفوكس 3، سفاري 3.1.1، ولكن IE7 على لا في أوبرا 9.52.
إذا كنت تستخدم المثال هو مبين أدناه (على أساس المثال palehorse)، وتحصل على مربع التنبيه المنبثقة عندما الصفحة الأولى الأحمال. ولكن إذا كنت ثم انتقل إلى عنوان آخر، ومن ثم الضغط على زر الخلف للعودة إلى هذه الصفحة، كنت لا تحصل على مربع التنبيه المنبثقة في أوبرا (ولكنك في المتصفحات الأخرى).

وعلى أي حال، أعتقد أن هذا هو قريب بما فيه الكفاية حتى الآن. شكرا للجميع!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta http-equiv="expires" content="0">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( 
                    function(){
                      alert('test');
                    }
                 );
</script>
</head>
<body>
<h1>Test of the page load event and the Back button using jQuery</h1>
</body>
</html>

حدث التفريغ لا يعمل بشكل جيد على IE 9.لقد جربته مع حدث التحميل (onload())، وهو يعمل بشكل جيد اي 9 و FF5.

مثال:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery(window).bind("load", function() {
        $("[name=customerName]").val('');
    });
</script>
</head>
<body>
    <h1>body.jsp</h1>
    <form action="success.jsp">
        <div id="myDiv">

        Your Full Name: <input name="yourName" id="fullName"
            value="Your Full Name" /><br> <br> <input type="submit"><br>

        </div>

    </form>
</body>
</html>

ولقد استخدمت قالب أتش تي أم أل. في ملف custom.js هذا القالب، وكانت هناك وظيفة مثل هذا:

    jQuery(document).ready(function($) {

       $(window).on('load', function() {
          //...
       });

    });

ولكن كان هذه الوظيفة لا تعمل عندما أذهب إلى الوراء بعد انتقال إلى صفحة أخرى.

وهكذا، حاولت ذلك، وأنها عملت:

    jQuery(document).ready(function($) {
       //...
    });

   //Window Load Start
   window.addEventListener('load', function() {
       jQuery(document).ready(function($) {
          //...
       });
   });

والآن، لقد 2 وظيفة "مستعدة" لكنه لا يعطي أي خطأ وصفحة يعمل بشكل جيد للغاية.

وعلى الرغم من ذلك، لا بد لي من أن تعلن أنها اختبرت على ويندوز 10 - V53 أوبرا وV42 الحافة ولكن لا المتصفحات الأخرى. نضع في اعتبارنا هذا ...

كان نسخة مسج 3.3.1 وتهاجر كان الإصدار 3.0.0

ملحوظة

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow