عنوان خاطئ في النافذة المنبثقة للتاريخ (فايرفوكس)

مرحبًا،
في متصفح فايرفوكس، يتم استبدال عنوان الصفحة السابقة الذي يظهر عند النقر بزر الماوس الأيمن على سهم “الصفحة السابقة” بعنوان الصفحة الحالية.

على سبيل المثال، إذا كانت الصفحة الأولى المعروضة هي:
https://meta.discourse.org/
شاهد كيف يبدو النقر بزر الماوس الأيمن على السهم (وهو صحيح):

ثم عند الانتقال إلى أي موضوع، مثل:

يتم استبدال عنوان الصفحة السابقة بعنوان الصفحة الحالية:

ومع ذلك، فإن الرابط لا يزال صالحًا.

هل لديك أي فكرة عن هذه المشكلة؟

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

تمكنت من إعادة إنتاج المشكلة.

وبما أن الأمر بسيط نسبيًا، سأضع علامة pr-welcome في حال أراد المجتمع المشاركة واقتراح حل.

حسناً، شكرًا على إجابتك

لقد اكتشفت أن هذه المشكلة تظهر أيضًا كإدخالات في سجل التصفح تكون تالفة إلى حد ما، وهو ما أعتبره مشكلة أكثر خطورة. وبشكل أكثر تحديدًا، يتم تعيين عنوان جديد لعنوان URL قديم عند التعامل مع التنقل بواسطة JS. يحدث هذا دائمًا تقريبًا في Firefox ولكنه نادر جدًا في Chrome (وجدت حالة واحدة حتى الآن: الانتقال من /top إلى موضوع).

يقول @sam على حق أن السبب هو ترتيب العمليات التي يتم بها تعديل عنوان URL والعنوان. أتمنى لو كان هناك دليل لأفضل الممارسات منشور في مكان ما يوضح الترتيب الصحيح: قم دائمًا بتحديث العنوان بعد استخدام واجهة برمجة تطبيقات history.

لقد حاولت إجراء بعض التصحيحات (وأود أن أقول مقدمًا أنني أمقت بناء أي مشروع كبير نسبيًا مجاور لـ npm). في البداية، استخدمت هذا الرمز لإجراء استطلاع صغير:

Object.defineProperty(document, "title", {
  get() {
    return document.head.querySelector('title').innerText;
  },
  set(t) {
    console.debug('title', t, new Error("title!").stack)
    debugger;
    document.head.querySelector('title').innerText = t;
  },
  enumerable: true,
  configurable: true,
});
let ___push___ = window.history.pushState;
window.history.pushState = function(...args) {
  console.debug('push', args[0], new Error().stack);
  debugger;
  ___push___.apply(this, args);
};

let ___replace___ = window.history.replaceState;
window.history.replaceState = function(...args) {
  console.debug('replace', args[0], new Error().stack);
  debugger;
  ___replace___.apply(this, args);
};

لقد أظهر بالفعل أنه في معظم الأحيان يكون هناك تعديل واحد للعنوان قبل عملية واجهة برمجة تطبيقات history. للأسف، لم يكن الأمر أكثر فائدة من ذلك: كان ربط ما يحدث في وقت التشغيل بالكود المصدري صعبًا للغاية - كانت عمليات الاهتمام مبعثرة جدًا، وكان مكدس الاستدعاءات مضللاً لأن التنفيذ قد أفسح المجال لحلقة أحداث Ember، وبشكل عام كانت تجربة تصحيح الأخطاء في Firefox جحيمًا. بعد الانتقال إلى Chrome، كنت أكثر نجاحًا. باختصار، على حد علمي، يقرر Ember بنفسه متى يقوم بتحديث عنوان URL. من ناحية أخرى، يمكن بدء تعديل العنوان من مكانين: [1] و [2]

يتم تنفيذ الأخير فقط قبل استدعاء واجهة برمجة تطبيقات history. يقع “السلف المشترك للكود” الخاص بهما هنا:

// Run all the necessary enter/setup/exit hooks
this.setupContexts(newState, transition); // <-- title change initiated here, by triggering `model.title:change` event

// Check if a redirect occurred in enter/setup
if (transition.isAborted) {
  // TODO: cleaner way? distinguish b/w targetRouteInfos?
  this.state!.routeInfos = this.currentRouteInfos!;
  return Promise.reject(logAbort(transition));
}

this._updateURL(transition, newState); // <-- url change initiated here

ومن المثير للاهتمام، “router.js هو مكتبة التوجيه المصغرة التي تستخدمها Ember.js.”

الآن أود أن أسلم معالجة المشكلة لشخص ما، على عكسي، على دراية عن بعد بالكود المصدري لـ discourse.

تعديل: نسيت أن أذكر: يتم تعديل document.title بواسطة [1] مرة واحدة أو أكثر بعد (كليهما) تعديله [2] وتعديل عنوان URL بواسطة واجهة برمجة تطبيقات history.

إعجاب واحد (1)

(كمستخدم جديد لا يمكنني وضع أكثر من رابطين في المنشور الواحد :frowning: )

[1] (discourse/app/assets/javascripts/discourse/app/lib/page-tracker.js at 245e9f30a4825beb86fcbfcf718208752748e5b4 · discourse/discourse · GitHub)

[2] (discourse/app/assets/javascripts/discourse/app/controllers/topic.js at 542f77181a47df8aa0f909f69814406491d08c5e · discourse/discourse · GitHub)

إعجاب واحد (1)