Ecmascript هو جوهر JavaScript ، ولكن عند استخدام JavaScript في الويب ، فإن Bom (نموذج كائن المتصفح) هو النواة الحقيقية.
الكائن الأساسي لـ BOM هو نافذة ، والتي تمثل مثيل للمتصفح.
في المتصفح ، يعد كائن النافذة واجهة لـ JavaScript للوصول إلى نافذة المتصفح وكائن عالمي محدد بواسطة ECMASCript. وهذا هو ، أي متغير ، كائن ، والوظيفة المحددة في صفحة الويب تأخذ نافذة ككائن عالمي لها.
1. النطاق العالمي
نظرًا لأن كائنات النوافذ تلعب دور الكائنات العالمية ، فإن جميع الكائنات والمتغيرات والوظائف المعلنة في النطاق العالمي ستصبح خصائص وطرق Windows.
لا يزال هناك فرق بين تحديد المتغيرات العالمية وتحديد السمات على كائنات النوافذ: لا يمكن حذف المتغيرات العالمية من خلال الحذف ، في حين أن السمات المحددة على كائنات النوافذ على ما يرام.
VAR AGE = 28 ؛ Window.Color = "Red" ؛ // في IE <9 ، يتم إلقاء خطأ ، ويتم إرجاع نافذة الحذف الخاطئة. في متصفحات أخرى ؛ // في IE <9 ، يتم إلقاء خطأ ، ويتم إرجاع نافذة الحذف الحقيقية في متصفحات أخرى ؛ // إرجاع تنبيه حقيقي (window.age) ؛ // 28 ALERT (window.color) ؛ // غير محدد
عند إضافة سمات نافذة باستخدام عبارات VAR ، هناك خاصية تسمى [[تكوين]]. يتم تعيين قيمة هذه الخاصية على خطأ ، لذلك لا يمكن حذف السمات المحددة بهذه الطريقة عن طريق الحذف.
سيتم إلقاء خطأ عند محاولة الوصول إلى متغير غير معلن ، ولكن عن طريق الاستعلام عن كائن النافذة ، يمكنك معرفة ما إذا كان هناك متغير غير معلن محتمل.
// يتم طرح الخطأ هنا لأن Oldvalue لا يعلن var newValue = Oldvalue ؛ // لم يتم طرح الخطأ هنا لأن هذا هو استعلام خاصية var newValue = window.oldvalue // ALERT (newValue) ؛ // غير محدد
في الواقع ، فإن العديد من كائنات JavaScript العالمية مثل المحلية والملاحة هي في الواقع خصائص لكائنات النوافذ.
2. علاقة النافذة والإطار
إذا كانت الصفحة تحتوي على إطارات ، فإن كل إطار يحتوي على كائن نافذة خاص به ويتم حفظه في مجموعة Frames.
في مجموعة الإطارات ، يمكن الوصول إليها من خلال فهرس رقمي أو اسم إطار.
<html> <head> <title> مثال على الإطارات </title> </head> <إطارات الصفوف = "160 ،*"> <الإطار src = "frame.htm" name = "topframe"> <frameet cols = "50 ٪ ، 50 ٪" name = "rightframe"> </frameset> </frameet> </html>
بالنسبة لهذا المثال ، يمكن الرجوع إلى الإطار أعلاه بواسطة Window.frames [0] أو Window.frames ["TopFrame"]. ومع ذلك ، من الأفضل استخدام Top.frames [0] للوصول إلى الإطار.
يشير الكائن العلوي دائمًا إلى إطار الطبقة الأعلى (الخارجي) ، أي نافذة المتصفح. يضمن استخدامه الوصول إلى إطار آخر بشكل صحيح في إطار واحد.
كائن نافذة آخر مقابل الكائن العلوي هو الوالد ، يشير الكائن الأصل دائمًا إلى الإطار العلوي المباشر للإطار الحالي.
هناك أيضًا كائن ذاتي ، والذي يشير دائمًا إلى النافذة. في الواقع ، يمكن استخدام الذات والنافذة مع بعضها البعض. الغرض من إدخال الكائنات الذاتية هو فقط أن تتوافق مع الكائنات العلوية والوالدين.
كل هذه الكائنات هي خصائص نافذة ويمكن استخدامها مع النافذة. parent أو window.top.
3. موقع النافذة
توفر معظم المتصفحات شاشة Screenleft و ScreenSentop ، والتي تستخدم لتمثيل موضع النافذة بالنسبة إلى الجانب الأيسر والأعلى من الشاشة ، على التوالي. يوفر FF نفس معلومات النافذة في ScreenX و Screeny Properties ، ويدعم Chorme Safari Ettsice هاتين الخصائص في نفس الوقت.
استخدم الكود التالي للحصول على المواضع اليسرى والعليا من النافذة عبر المتصفح.
var leftpos = (typeof window.screenleft == "number")؟ window.screenleft: window.screenx ؛ var toppos = (typeof window.screentop == "number")؟ window.screentop: window.screeny ؛
تجدر الإشارة إلى أنه في IE و Opera و Screenleft و ScreenPanop حفظ المسافة من الجانب الأيسر والأعلى من الشاشة إلى المنطقة المرئية للصفحة الممثلة بواسطة كائن النافذة. في Chrome و FF و Safari و Screeny و Screensop ، حفظ قيم الإحداثيات للمتصفح بأكمله على الشاشة.
والنتيجة النهائية هي أنه لا يمكن الحصول على قيم الإحداثيات الدقيقة على الجانب الأيسر والأعلى من النافذة في ظروف المتصفح المتقاطع.
باستخدام طرق Moveto () و MoveBy () ، يمكن نقل النافذة بدقة إلى الموضع الجديد. كلتا الطريقتين تتلقى معلمتين. يتلقى Moveto () إحداثيات محور X و Y ، ويتلقى MoveBy () البكسلات المتحركة.
// انقل الشاشة إلى الجزء العلوي الأيسر Moveto (0،0) ؛ // حرك النافذة التي تركتها 50 بكسل MoveBy (-50،0) ؛
ومع ذلك ، قد يتم تعطيل هاتين الطريقتين من قبل المتصفح. لا تنطبق هاتان الطريقتان إلا على كائن النافذة الخارجي ولا ينطبق على الأطر.
4. حجم النافذة
توفر المتصفحات السائدة 4 خصائص لتحديد حجم النافذة: العداء الداخلي ، الداخلية ، والعرض الخارجي والخارجية.
في IE9+، Safari ، و FF ، تُرجع العرض الخارجي والخارجي حجم نافذة المتصفح نفسها (بغض النظر عن الوصول إلى الإطار) ، ولكن في الأوبرا ، تمثل قيم هاتين الخصائصين حجم حاوية عرض الصفحة (حجم نافذة علامة تبويب واحدة). تمثل العرض الداخلي والداخلية حجم عرض الصفحة في الحاوية (ناقص عرض الحدود). ولكن في Chrome ، تمثل هذه الخصائص الأربعة حجم منفذ العرض بدلاً من حجم المتصفح.
لم يوفر IE9 السمات للحصول على حجم نافذة المتصفح من قبل ؛ ومع ذلك ، فإنه يوفر معلومات حول المنطقة المرئية للصفحة من خلال DOM.
في IE و FF و Chrome و Opera و Safari ، يتم تخزين معلومات Page Viewport في المستند. في IE6 ، يجب أن يكون فعالًا في الوضع القياسي. إذا كان وضعًا مختلطًا ، فيجب الحصول على نفس المعلومات من خلال document.body.clientwidth و document.body.clienthight. لا يميز Chrome بين الوضع القياسي أو الوضع المختلط.
على الرغم من أنه لا يمكن تحديد حجم نافذة المتصفح نفسها في النهاية ، إلا أنه يمكن الحصول على حجم منفذ عرض الصفحة.
var pagewidth = window.innerwidth ، pageheight = window.innerheight ؛ if (typeof pagewidth! = "number") {if (document.compatmode == "css1compat") {pageWidth = document.documentElement.ClientWidth ؛ pageheight = document.documentElement.clientheight ؛ } آخر {pageWidth = document.body.clientwidth ؛ pageheight = document.body.clientheight ؛ }} ALERT ("العرض:" + pagewidth) ؛ تنبيه ("الارتفاع:" + pageheight) ؛بالنسبة للأجهزة المحمولة ، Window.innerwidth و Window.innerhight ، احتفظ بمنفذ العرض المرئي ، وهو حجم منطقة الصفحة على الشاشة. تحتاج متصفحات IE Mobile إلى الحصول على نفس المعلومات من خلال المستند.
يمكن استخدام كل من Resizeto () و ResizeBy () لضبط حجم نافذة المتصفح. كلتا الطريقتين تتلقى معلمتين. يتلقى Resizeto () العرض الجديد والارتفاع الجديد لنافذة المتصفح ، ويتلقى ResizeBy () فرق العرض وفرق الارتفاع بين النافذة الجديدة والنافذة القديمة.
// اضبط إلى 100*100 Resizeto (100،100) ؛ // ضبط 200*150 MoveBy (100،50) ؛
ومع ذلك ، قد يتم تعطيل هاتين الطريقتين من قبل المتصفح. لا تنطبق هاتان الطريقتان إلا على كائن النافذة الخارجي ولا ينطبق على الأطر.
5. التنقل وفتح النوافذ
يمكن أن تفتح طريقة Window.Open () عنوان URL معينًا أو نافذة مستعرض جديدة. تتلقى هذه الطريقة 4 معلمات: URL ، هدف النافذة ، سلسلة ميزة وقيمة منطقية تشير إلى ما إذا كانت الصفحة الجديدة تحل محل الصفحة الحالية.
يظهر فجأة
معلمات مختلفة
من بينها ، نعم/لا يمكن استخدامها أيضًا 1/0 ؛ PixelValue هي قيمة محددة ، وحدات بكسل.
المعلمات | نطاق القيمة | وصف
انخفاض دائما | نعم/لا | تحديد النوافذ مخفية خلف جميع النوافذ
دائمًا | نعم/لا | حدد Windows معلقًا على جميع النوافذ
يعتمد | نعم/لا | ما إذا كانت النافذة الأصل مغلقة في نفس الوقت
الدلائل | نعم/لا | هل أعمدة الدليل من NAV2 و 3 مرئية؟
الارتفاع | pixelvalue | ارتفاع النافذة
مفاتيح hots | نعم/لا | تعيين مفتاح الخروج الآمن في النافذة بدون شريط قائمة
Innerheight | Pixelvalue | ارتفاع بكسل المستند في النافذة
innerwidth | pixelvalue | pixelwidth من المستند في النافذة
الموقع | نعم/لا | هل شريط الموقع مرئي؟
Menubar | نعم/لا | هل شريط القائمة مرئي؟
Outerheight | pixelvalue | اضبط ارتفاع البكسل للنافذة (بما في ذلك الحدود الزخرفية)
Outerwidth | pixelvalue | يضع عرض البكسل للنافذة (بما في ذلك الحدود الزخرفية)
قابلة للاشتعال | نعم/لا | هل حجم النافذة قابل للتعديل؟
screenx | pixelvalue | طول بكسل النافذة إلى الحدود اليسرى للشاشة
Screeny | pixelvalue | طول البكسل من النافذة إلى الحدود العلوية للشاشة
أشرطة التمرير | نعم/لا | ما إذا كان هناك شريط تمرير في النافذة
شريط العنوان | نعم/لا | هل عمود عنوان النافذة مرئي؟
شريط الأدوات | نعم/لا | هل شريط أدوات النافذة مرئي؟
عرض | pixelvalue | عرض البكسل نافذة
Z-look | نعم/لا | ما إذا كانت النافذة تطفو على نوافذ أخرى بعد تنشيطها
مثال:
window.open ('page.html' ، 'newWindow' ، 'height = 100 ، width = 400 ، top = 0 ، left = 0 ، شريط الأدوات = لا ، menubar = لا ، scrollbars = لا ، resizable = لا ، الموقع = لا ، الحالة = لا ")بعد تشغيل البرنامج النصي ، سيتم فتح page.html في النموذج الجديد NewWindow ، مع عرض 100 ، ارتفاع 400 ، 0 بكسل من الجزء العلوي من الشاشة ، 0 بكسل من يسار الشاشة ، لا شريط أدوات ، لا شريط قائمة ، لا شريط تمرير ، لا تغيير حجم ، لا شريط عناوين ، لا يوجد شريط الحالة.
6. مكالمات متقطعة ومكالمات المهلة
JavaScript هي لغة واحدة من الخيوط ، ولكنها تتيح تنفيذ رمز الجدولة في لحظة محددة من خلال تعيين قيمة المهلة ووقت الفاصل الزمني. السابق ينفذ الرمز بعد الوقت المحدد ، بينما يتم استدعاء الأخير مرة واحدة لكل وقت محدد.
مهلة استدعاء setTimeOut ()
تقبل طريقة setTimeOut () معلمتين ، والمعلمة الأولى هي وظيفة ، والمعلمة الثانية هي الوقت (وحدات microseconds) ، والتي تُرجع المعرف العددي.
setTimeOut (function () {Alert ("Hello!") ؛} ، 1000) ؛بعد استدعاء setTimeOut () ، ستعيد الطريقة معرفًا رقميًا ، مما يشير إلى استدعاء المهلة ، ويمكن إلغاء استدعاء المهلة.
var timeoutid = setTimeOut (function () {Alert ("Hello!") ؛} ، 1000) ؛ ClearTimeout (timeOutId) ؛استدعاء متقطع setInterval ()
تقبل طريقة setInterval () معلمتين ، والمعلمة الأولى هي دالة ، والمعلمة الثانية هي الوقت (وحدة microseconds) ، وتُرجع المعرف العددي
setInterval (function () {Alert ("Hello!") ؛} ، 1000) ؛قم بإلغاء المكالمة إلى ClearInterval () وقبول معرف مكالمة متقطعة المعلمة
var الفاصل = فارغ ؛ var span = document.createElement ("span") ؛ // إنشاء عقدة span.id = "الوقت" ؛ // قم بتعيين Dance ID document.body.appendchild (span) ؛ // إضافة وظيفة span gutrementNumber () {var now = new date () ؛ var timestr = now.tolocaletimestring () ؛ span.innertext = timestr ؛ num ++ ؛ if (num == 10) {clearInterval (intervalId) ؛ // يبقى الوقت دون تغيير بعد عشر ثوان}} intervalId = setInterval (GutrementNumber ، 1000) ؛حاول استخدام مكالمات المهلة بدلاً من المكالمات المتقطعة
var num = 0 ؛ var max = 10 ؛ دالة zusrementNumber () {num ++ ؛ if (num <max) {setTimeOut (GerutrementNumber ، 1000) ؛ } آخر {Alert ("OK") ؛ }} setTimeOut (GerimentNumber ، 1000) ؛7. مربع الحوار النظام
تنبيه مربع التحذير ()
تنبيه ("مرحبًا!") ؛يحتوي مربع المعلومات على زر إلغاء
إذا (تأكيد ("هل توافق؟")) {Alert ( } آخر {Alert ("Dissister") ؛ }موجه () ، دفع المستخدم إلى إدخال بعض النص
var result = form ("تحترم لقبك؟" ، "") ؛ if (result! == null) {Alert ("مرحبًا ،" +result) ؛ }التفسير التفصيلي أعلاه لـ BOM (كائن النافذة) في JavaScript هو كل المحتوى الذي شاركه المحرر. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.