تقدم لك هذه المقالة المعرفة ذات الصلة بجافا سكريبت، وهي تقدم بشكل أساسي المشكلات ذات الصلة بعمليات BOM، بما في ذلك الأحداث الشائعة لكائنات النافذة وآليات تنفيذ JavaScript وما إلى ذلك. دعونا نلقي نظرة عليها معًا وآمل أن تكون مفيدة للجميع. الأحداث الشائعة لكائن النافذة
حدث تحميل النافذة:
- window.onload: حدث تحميل الصفحة يتم تشغيله عندما يتم تحميل محتوى المستند بالكامل (بما في ذلك الصور وملفات البرامج النصية وملفات CSS وما إلى ذلك) ويتم استدعاء وظيفة المعالجة.
- document.addEventListener('DOMContentLoaded', function(){}): فقط عند اكتمال تحميل DOM، باستثناء أوراق الأنماط والصور والفلاش وأحداث التوافق
لضبط حجم النافذة:
- window.onresize: ضبط حدث تحميل حجم النافذة
window يمكن استخدام طريقة .open() للانتقال إلى عنوان URL محدد أو لفتح نافذة متصفح جديدة.
- تتلقى هذه الطريقة 4 معلمات: عنوان URL المراد تحميله، والنافذة المستهدفة، وسلسلة أحرف، وتمثيل للنافذة الجديدة في سجل المتصفح ما إذا كان سيتم تمثيل القيمة المنطقية للصفحة المحملة حاليًا
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
المؤقت:
- setInterval(المعالج: أي, مهلة؟: طويل, وسيطات...: أي): حلقة
- ClearInterval(handle?: long): إلغاء setInterval
- setTimeout(المعالج: أي, المهلة?: طويل
، الوسائط...: أي) : - ClearTimeout(handle?: long)
- لمرة واحدة
: إلغاء setTimeout
window.scroll(x, y)
window.scrollTo(x, y): كلاهما نفس الاستخدام لتغيير موضع الأفقي و أشرطة التمرير العمودية، بشرط أن يكون هناك شريط التمرير موجود في نافذة الصفحة
.scrollBy(x, y): التمرير التراكمي لشريط التمرير، الأرقام الموجبة تنخفض، والأرقام السالبة ترتفع window.scrollBy(0, 10) : عند الاتصال كل 100 مللي ثانية، يتحرك شريط التمرير بمقدار 10 بكسل
window.getComputedStyle(elem, pseudo-class)
مربع حوار
- تنبيه تنبيه ("سلسلة مطالبة")
- ينبثق مربع تحذير ويعرض نص سلسلة المطالبة في مربع التحذير
- تأكيد تأكيد
تعرض - ("سلسلة المطالبة")
- مربع تأكيد وتؤكد. يتم عرض سلسلة المطالبة في المربع
- عندما ينقر المستخدم على زر "تأكيد"، فإنه يُرجع صحيحًا، وينقر على "إلغاء" لإرجاع
- رسالة مطالبة خاطئة ("سلسلة مطالبة"). "القيمة الافتراضية")
- تعرض مربع إدخال وتعرض حرف المطالبة في سلسلة مربع الإدخال، في انتظار إدخال المستخدم
- عندما ينقر المستخدم على زر "تأكيد"، يتم إرجاع إدخال المستخدم عند النقر فوق الزر "إلغاء". ، يتم إرجاع قيمة فارغة.
تقوم آلية تنفيذ JavaScript
بتشغيل البرنامج النصي JS وتضع كود JS في مكدس التنفيذ في وضع التنفيذ المتزامن. ، خطأ) في واجهات برمجة تطبيقات الويب (قائمة انتظار المهام). عند اكتمال التعليمات البرمجية الموجودة في مكدس التنفيذ، انتقل إلى قائمة انتظار المهام وخذ المهمة الأولى للتنفيذ، واحصل على واحدة من قائمة انتظار المهام وقم بتنفيذها، و قم بتنفيذه بشكل متكرر (حلقة الحدث) حتى يكتمل التنفيذ في قائمة انتظار المهام.
يتم استخدام window.history لكائن الموقع
للحصول على عنوان URL للصفحة الحالية وإعادة توجيه المتصفح إلى صفحة جديدة.
http://www.itcast.cn:80/index.html?name=andy&age=1#link
http: بروتوكول الاتصال www.itcast.cn: اسم المجال 80: منفذ Index.html: المسار؟ name=andy&age=1: المعلمة # جزء الرابط: نقطة الربط،
سمة كائن الارتباط:
- href*: احصل على مضيف URL بالكامل أو قم بتعيينه
- : إرجاع اسم المضيف (اسم المجال)
- اسم المضيف: تعيين أو إرجاع اسم المضيف لمنشور URL الحالي
- : إرجاع
- اسم مسار رقم المنفذ: إرجاع بحث المسار
- *:
- تجزئة معلمة الإرجاع: إرجاع الجزء (المحتوى بعد #)
- البروتوكول: تعيين أو إرجاع طريقة كائن البروتوكول
لعنوان URL الحالي:
- التعيين: مثل href، يمكنك الانتقال إلى الصفحة (وتسمى أيضًا صفحة إعادة التوجيه)
- الاستبدال: استبدال الصفحة الحالية، لأنه لم يتم تسجيل السجل، لا يمكنك العودة إلى
- إعادة تحميل
الصفحة - : إعادة تحميل الصفحة، أي ما يعادل
كائن متصفح
وظيفة التحديث
المستكشف: كائن يقوم بتغليف ملف تعريف الارتباط لمعلومات تكوين المتصفح،
- ممكّن سواء تم تشغيل ملفات تعريف الارتباط في
- ملف تعريف الارتباط للمتصفح الحالي: مساحة التخزين على العميل، والسعة صغيرة، تختلف أحجام المتصفحات، ويمكن حفظ المفتاح بشكل دائم
- العيوب: على وجه الخصوص
تقوم المكونات الإضافية - للمعلومات الشخصية Easy Leak
- بتغليف جميع معلومات المكونات الإضافية المثبتة بواسطة المتصفح
- userAgent واسم المتصفح ورقم إصدار kernel وسلسلة أخرى من الأحرف
- على الإنترنت هل الكمبيوتر غير متصل بالإنترنت؟
- تقوم المنصة بإرجاع النظام الأساسي لنظام التشغيل الذي يقوم بتشغيل المتصفح،
- تقوم appCodeName بإرجاع الاسم الرمزي للمتصفح
- ، تقوم appName بإرجاع اسم المتصفح،
- تقوم appVersion بإرجاع معلومات النظام الأساسي والإصدار الخاصة
بنافذة كائن محفوظات المتصفح.
يتضمن كائن التاريخ مجموعة محفوظات المتصفح (عنوان url) الخاصة
- بالمتصفح الوظيفة: History.back()
- وظيفة إعادة التوجيه للمتصفح: History.forward()
- أدخل صفحة معينة في السجل:
كائن الشاشة
History.go() window.كائن الشاشة يحتوي على معلومات حول المستخدم
// الشاشة: احصل على حجم دقة جهاز العرض // الدقة الكاملة: screen.widht/height
// كيفية تحديد نوع العميل المتوافق مع جميع عروض العميل // شاشة كبيرة، شاشة متوسطة، شاشة صغيرة، شاشة صغيرة جدًا // lg md sm xs
// هاتف لوحة الكمبيوتر TV
// العرض >= 1200 >=992 >= 768 < 768
// الدقة المتبقية بعد إزالة شريط المهام // screen.availHeight/availWidth
- عرض الشاشة المتوفر: screen.availWidth
- ارتفاع الشاشة المتوفر: screen.availHeight
- ارتفاع الشاشة: screen.Height
- عرض الشاشة: screen.Width
- عدد أرقام لون الشاشة : إزاحة عنصر colorDepth
يمكن لسلسلة الإزاحة
الحصول ديناميكيًا على موضع (إزاحة) العنصر وحجمه وما إلى ذلك.
- احصل
- على مسافة العنصر إلى موضع العنصر الأصلي.
- احصل على حجم العنصر نفسه
- لا تحتوي القيمة على وحدة.
السمات شائعة الاستخدام لسلسلة الإزاحة:
- element.offsetParent
- : تُرجع العنصر الأصلي مع تحديد موضعه كعنصر
- للعنصر الموجود أعلى العنصر الأصلي الذي تم وضعه
- element.offsetLeft*: يُرجع النطاق النسبي للعنصر، هناك إزاحة على يسار العنصر الأصلي الذي تم وضعه
- element.offsetWidth: يُرجع عرض نفسه بما في ذلك الحشو والحدود والمحتوى. ، بدون عنصر الوحدة
- .offsetHeight: يُرجع ارتفاع نفسه بما في ذلك الحشو والحدود والمحتوى، بدون
عميل المنطقة المرئية لعنصر الوحدة، تحصل السلسلة
ديناميكيًا على السمات الشائعة
مثل حجم الحدود وحجم العنصر للعناصر
: - element.clientTop: حجم الحد العلوي للعنصر
- element.clientLeft: حجم الحد الأيسر للعنصر
- element.clientWidth*: يُرجع العرض نفسه بما في ذلك المساحة المتروكة ومنطقة المحتوى، باستثناء الحدود، بدون
- عنصر الوحدة.clientHeight*: يُرجع ارتفاع نفسها بما في ذلك المساحة المتروكة والمحتوى، باستثناء الحدود، بدون
عنصر الوحدة، تحصل سلسلة التمرير
ديناميكيًا على حجم العناصر ومسافة التمرير لها.
element.srcolTop
- *
- : تُرجع مسافة الجانب العلوي المدرفلة، بدون عنصر الوحدة
. - المسافة اليسرى، بدون عنصر الوحدة
- .srcollWidth: إرجاع العرض الفعلي، بدون حدود، بدون
- عنصر الوحدة.srcolHeight: إرجاع ارتفاعه الفعلي، ولا يحتوي على حدود ولا يحتوي على
شريط تمرير للوحدة. عند التمرير، سيتم تشغيل حدث التمرير
لعرض مسافة التمرير لشريط التمرير.
window.pageXOffset/pageYOffset
IE8 وأدناه غير متوافقين مع document.body/documentElement.scrollLeft/scrollTop
التوافق مربك ويستغرق وقتًا طويلاً، لأنه من المستحيل لقيمتين لهما قيم في نفس الوقت ، طريقة توافق التغليف، ابحث عن المسافة المتدحرجة لعجلة شريط التمرير getScrollOffet()
/*
يتضمن طريقة للحصول على مسافة التمرير لشريط التمرير العوائد: x: مسافة التمرير لشريط التمرير الأفقي y: مسافة التمرير لشريط التمرير العمودي */function getScrollOffet(){.
إذا(window.pageXOffset){
يجب أن تكون قيمة إرجاع {//{} للكائن بعد الكلمة الأساسية، وإلا فسيقوم النظام بإضافتها تلقائيًا، وستكون قيمة الإرجاع غير محددة
x : window.pageXOffset،
ص : window.pageYOffset }
}else{//متوافق مع IE8 وما دونه return {
x : document.body.scrollLeft + document.documentElement.scrollLeft،
y : document.body.scrollTop + document.documentElement.scrollTop }
}}
عرض حجم نافذة العرض
window.innerWidth/innerHeight
غير متوافق مع IE8 والإصدارات الأقدم (ملاحظة: العرض والارتفاع هنا لا يتضمنان ارتفاع شريط القائمة، وشريط الأدوات، وشريط التمرير، وما إلى ذلك) document.documentElement.clientWidth/clientHeight
في الوضع القياسي، أي متصفح متوافق مع document.body.clientWidth/clientHeight
إنها طريقة توافق لتغليف المتصفح مناسبة للمواقف الغريبة. getViewportOffset()
/*يُرجع التغليف قيمة إرجاع حجم منفذ العرض للمتصفح :
w: عرض إطار العرض h: ارتفاع إطار العرض*/function getViewportOffset(){
إذا (نافذة. العرض الداخلي) {
يعود {
ث : window.innerWidth،
h : window.innerHeight }
}else{ //متوافق مع IE8 والمتصفحات الأقدم if(document.compatMode == 'BackCompat'){
//Return { في وضع العرض الغريب
ث : document.body.clientWidth،
ح : document.body.clientHeight }
}آخر{
// إرجاع الوضع القياسي {
ث : document.documentElement.clientWidth،
h : document.documentElement.clientHeight }
}
}}console.log(document.compatMode); // الوضع الغريب BackCompat // الوضع القياسي CSS1Compat
لعرض الحجم الهندسي للعنصر. الفهم الجديد لـ
domElement.getBoundingClientRect()
في ES5 له توافق جيد؛ تمثل السمات مثل الأعلى واليمين والأسفل إحداثيات X وY للزاوية اليسرى العليا للعنصر لم يتم تنفيذ سمات العرض في الإصدارات القديمة من IE، النتائج التي تم إرجاعها ليست في الوقت الفعلي '
// احصل على موضع العنصر في المستند function getElementPosition(target){.
// دعم طريقة BoundingClientRect() if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // عندما يتحرك شريط التمرير، أضف الموضع x لشريط التمرير: pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} آخر {
فار بوس = {
اليسار: 0،
أعلى: 0
}
var _elm = target;
بينما (target.offsetParent) {
if(_elm == target){// قم بتجميع اليسار والأعلى لأول مرة
pos.left += target.offsetLeft;
pos.top += target.offsetTop;
}آخر{
pos.left += target.offsetLeft + target.clientLeft;
pos.top += target.offsetTop + target.clientTop;
}
// إعادة تعيين الهدف target = target.offsetParent;
}
العودة {س: pos.left، ص: pos.top}
}}
خاصية
شريط الحالة
- defaultStatus تغير حالة العرض الافتراضية لشريط حالة المتصفح
- مؤقتًا تغير
موضع نافذة
العرض لحالة المتصفح - IE
- screenLeft يعلن الإحداثي x للركن الأيسر العلوي من شاشة النافذة
- ، يعلن الأعلى عن الإحداثي y للزاوية اليسرى العليا من النافذة
- document.body.screenLeft
- document.documentElement.screenLeft يعلن عدد البكسلات التي مررها المستند الحالي إلى اليمين
- document.body.screenTop
- document.documentElement.screenTop يعلن عدد البكسلات التي مررها المستند الحالي إلى اليمين
- !
- يعلن IE screenX عن إحداثي x للركن الأيسر العلوي من النافذة،
- يعلن screenY عن الزاوية اليسرى العليا من النافذة، يعلن إحداثي y
- pageXOffset عن عدد البكسلات التي قام المستند الحالي بتمريرها إلى الصفحة اليمنى
- ، يعلن YOffset عن عدد البكسلات التي
قام المستند الحالي بتمريرها إلى الصفحة اليمنى. - تم تمرير المستند الحالي إلى اليمين
- FF
- InternalHeight يُرجع ارتفاع منطقة عرض المستندات للنافذة
- InternalWidth يُرجع عرض منطقة عرض المستندات للنافذة
- ExternalWidth يُرجع العرض الخارجي للنافذة
- ExternalHeight يُرجع الارتفاع الخارجي لـ
يمكن لفتحة والسمات الأخرى
- تحقيق الاتصال بين النماذج المتقاطعة تحت نفس اسم المجال. يجب أن يحتوي النموذج على أداة فتح نموذج آخر،
- وإرجاع صحيح عند إغلاق النافذة الحالية
- أو إرجاع اسم
- النافذة إرجاع اسم النافذة الحالية