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

https://stackoverflow.com/questions/864942

21-08-2019
|

سؤال

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

على سبيل المثال، لنفترض أن المستخدم Bob لديه نافذتان للمتصفح مفتوحتان على صفحة ListOfSomething.تحتوي كل قائمة على رقم الصفحة المحملة السمة التي أحتاج إلى الاستمرار.وإلا سينتهي الأمر دائمًا بالمستخدمين في الصفحة 1 عند التحديث.ربما قام بوب بتحميل نافذة المتصفح 1 وتوجيهها إلى الصفحة 5 ثم تحميل نافذة المتصفح 2 وتوجيهها إلى الصفحة 14.إذا قمت فقط بتخزين السمة بناءً على معرف الجلسة، فسيحصل بوب على الصفحة 14 في النافذة 1 إذا قام بتحديثها.

لاحظ أن متغيرات الحالة الخاصة بي هي في الواقع أكثر تعقيدًا من هذا المثال البسيط وأن عدم قدرتي على الاستمرار فيها قد يؤدي إلى مشاكل كبيرة (نقاط ضعف في تطبيقي).

أحتاج إلى نوع من معرف نافذة المتصفح أو شيء من هذا القبيل.بالطبع يجب أن يكون حلاً عبر المتصفحات (IE6+، Wekbit?+، FF2+)

أيه أفكار؟

ملاحظة حول الأهمية:ضع في اعتبارك أن هذا مفيد أيضًا في الحالة التي تقوم فيها بخلط الصفحات المستندة إلى النماذج القديمة مع العناصر الأحدث الممكّنة لـ AJAX.في بعض الأحيان تحتاج إلى إعادة نشر النماذج ولا تريد أن تفقد بعض قيم الحالة من جانب العميل.

المحلول

يمكنك تعيين اسم النافذة الخاصة بك، والصيغة الدقيقة تغيب عني الآن، ولكن يمكنك استخدام الوقت الحالي ومعرف الجلسة لإنشاء معرف فريد عند تحميل النافذة، ثم استخدام هذا المعرف

سيتم ذلك بنفس الطريقة التي تحدد بها اسمًا في وظيفة javascript window.open() (ولكن يمكنك القيام بذلك بنفسك، بدلاً من نافذة جديدة)

يظهر جوجل:

self.window.name = myclass.getUniqueWindowId( thisSession );

تحديث

فيما يتعلق بحاجتك إلى حفظ هذا من التحديث إلى التحديث، فقد أجريت بعض الاختبارات ويبدو أنه سيتم حفظه من التحديث إلى التحديث.باستخدام Firefox 3، عند التحميل الأولي، يكون اسم النافذة فارغًا، ويتم الضغط على CTRL+R مرارًا وتكرارًا، ويتم ملء اسم النافذة.ثم علقت على إعداد رمز الاسم وأعدت تحميله وما زال يحتفظ بالاسم.

<script type="text/javascript">

    alert( self.window.name );

    self.window.name = "blah";

</script>

تحديث

لا بد لي من ملاحظة التعليق أدناه على البرنامج المساعد "jquery-session" الخاص بـ jQuery، والذي يعمل حقًا ويقدم أكثر بكثير مما تمت مناقشته هنا.

بالرغم من, ، يجب أيضًا توضيح أنه يعتمد على تخزين الويب الخاص بـ HTML5، غير مدعوم من قبل IE الأقدم الإصدارات.

لا تزال الشركات تعتمد بشكل كبير على IE 7 ('وما دونه' هنا في البرازيل).

مرتكز على self.window.name, ، الحل لكل شيء غير متوافق مع HTML5، أقدم مقتطف التعليمات البرمجية التالي كحل عبر المتصفحات:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/jscript">
    //----------------------------------------------------------------------
    //-- guarantees that window.name is a GUID, and that it would
    //-- be preserved whilst this window's life cicle
    //----------------------------------------------------------------------
    //-- window.name will be set to "GUID-<SOME_RANDOM_GUID>"
    //----------------------------------------------------------------------

    $(window).load(
        function () {
            //----------------------
            var GUID = function () {
                //------------------
                var S4 = function () {
                    return(
                            Math.floor(
                                    Math.random() * 0x10000 /* 65536 */
                                ).toString(16)
                        );
                };
                //------------------

                return (
                        S4() + S4() + "-" +
                        S4() + "-" +
                        S4() + "-" +
                        S4() + "-" +
                        S4() + S4() + S4()
                    );
            };
            //----------------------

            if (!window.name.match(/^GUID-/)) {
                window.name = "GUID-" + GUID();
            }
        }
    ) //--------------------------------------------------------------------
</script>

لقد وجدت وظيفة GUID هنا (والذي اقترحت عليه بعض عمليات تنظيف التعليمات البرمجية).

نصائح أخرى

وماذا عن وجود الخادم الخاص بك تولد عشوائيا معرف ووالتي تخزن في الصفحة (بعض متغير جافا سكريبت) عندما يتم عرضه؟ ثم تشمل فقط أن ID في طلب اياكس. انه متعود "المساعدة على تحديث المتصفح، ولكن طالما يترك للمستخدم أن الصفحة في مكان (ويسمح فقط الاشياء اياكس بذل كل شيء) يجب أن تعمل بشكل جيد.

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

يتحقق الخادم الخاص بك مما إذا كان المتصفح يرسل المعرف الفريد العمومي (GUID) مع طلبه (يعمل فقط مع ajax أو إرسال النموذج)
إذا لم يكن هناك (تحديث المتصفح، زر الرجوع) فإنه يرسل فقط صفحة تحتوي على برنامج نصي صغير لجافا سكريبت.يقوم هذا البرنامج النصي بإنشاء المعرف الفريد العمومي (GUID) ووضعه في مخزن window.name كما هو موضح أعلاه.بعد ذلك يقوم البرنامج النصي بإنشاء نموذج باستخدام المعرف الفريد العمومي (GUID) كحقل مخفي وإرساله إلى الخادم.تستخدم سمة الإجراء نفس عنوان URL كما كان من قبل (window.location.href)

--> الآن يتعرف الخادم على GUID ويمكنه تسليم المحتوى حسب الحاجة.

هذا هو الكود الخاص بي (المعرف الفريد العمومي (GUID) الذي أقوم بإنشائه على الخادم لأسباب أمنية، وبناء الجملة "${gUid} من العلامة الحرة ويقوم فقط بإدراج المعرف الإرشادي من الخادم):

<script>
    $(window).load(
        function () {
            if (!window.name.match(/^GUID-/)) {
                window.name = "GUID-" + "${gUid}";
            }
            $('<form action='+window.location.href+' method="POST"><input type="hidden" name="X-GUID" id="X-GUID" value='+window.name+'></form>').appendTo('body').submit();
        }
    );  
</script>

نأمل أن يساعد شخص ما

بالمناسبة، يجب استخدام هذه التقنية فقط في "الصفحات غير المخصصة لتحسين محركات البحث"، نظرًا للحاجة إلى JavaScript للحصول على المحتوى.ولكن بشكل عام، لا تحتاج صفحات تحسين محركات البحث (SEO) إلى تحديد جلسة علامة التبويب.

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

وwindow.name يمكن الكتابة عليه العرف جافا سكريبت المكتبات، datetimepickers الخ.

وبدلا من window.name أقترح عليك استخدام DOM رئيس العلامة الوصفية لتخزين اسم المستخدم الخاص بك

<html><head><meta id="windowID" content="{YOUR ID}">

وبعد تحميل الصفحة، لديك لتحميل كل شيء عبر اياكس في هذا الإطار، فإنك يمكن أن نعلق هذه ID لكل طلب كقيمة رأس (أو البيانات). على سبيل المثال في مسج مع هذا الرمز:

$(document)
    .ajaxSend(function(event, jqXHR, ajaxOptions) {
        jqXHR.setRequestHeader('windowID',
            document.getElementById('windowID').content);
})

لاستخدام هذا الحل، لديك في الحصول على قيم رأس مخصص على جانب الملقم. على سبيل المثال في جافا بريمج:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String windowName = request.getHeader("windowID");

إذا قمت بتخزين الترحيل والفرز والتصفية الخ معلومات عن جانب الخادم كما سمة الدورة، يجب تخزينها تعلق على حدة إلى منفصل نافذة ID-ق.

ويمكنك استخدام جلسة عمل HTML5 التخزين، فقط توليد معرف فريد ووضعه على تخزين الجلسة! ما هو بارد عن ذلك كل نافذة أو علامة تبويب تخزين الجلسة الخاصة به. على سبيل المثال:

وإذا كنا تشغيل ما يلي على 3 نوافذ:

ونافذة 1: sessionStorage.setItem('key' , 'window1');

ونافذة 2: sessionStorage.setItem('key' , 'window2');

ونافذة 3: sessionStorage.setItem('key' , 'window3');

وsessionStorage.getItem('key' ); <<< هذا سيعود قيمة المقابل على النافذة!

ونافذة 1: عودة sessionStorage.getItem('key' ); نافذة 1

ونافذة 2: عودة sessionStorage.getItem('key' ); نافذة 2

ونافذة 3: عودة sessionStorage.getItem('key'); نافذة 3

وأعتقد أنك تحاول حفظ متغير (بشكل منفصل على كل علامة تبويب / نافذة).

وsessionStorage يعمل كما سحر.

والمشكلة الوحيدة التي قد تواجه هذا المتصفح يجب أن يدعم HTML 5.

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

لا تنتمي إلى StackOverflow