موقع النافذة
【1】 الحصول على
يوفر المتصفح (Firefox لا يدعمه) خصائص screenLeft و screenTop ، والتي يتم استخدامها لتمثيل موضع النافذة بالنسبة إلى الجانب الأيسر والأعلى من الشاشة على التوالي.
عند تعظيم النافذة ، لا تكون القيم التي يتم إرجاعها بواسطة كل متصفح هي نفسها عند تشغيل الكود التالي. يعود Chrome إلى اليسار: 0 ؛ TOP: 0. IE يعود إلى اليسار: 0 ؛ أعلى: 56 (إذا كان هناك شريط قائمة ، فإنه يعود إلى اليسار: 0 ؛ أعلى: 78) ، لأن IE يحفظ المسافة من الجانب الأيسر والأعلى من الشاشة إلى المنطقة المرئية للصفحة الممثلة بواسطة كائن النافذة. يعود Safari إلى اليسار: -8 ؛ أعلى: -8 بسبب علةه الخاصة
// حرك النافذة ، سيكون هناك تغيير في القيمة <div id = 'mydiv'> </viv> <script> var timer = setInterval (function () {mydiv.innerhtml = 'left:' + window.screenleft + '؛ top:' + window.screentop ؛} mydiv.onclick =النتيجة: اليسار: 0 ؛ الأعلى: 93
توفر خصائص screenX و screenY (IE8-) أيضًا معلومات موضع النافذة نفسها.
[ملاحظة] screenLeft و screenTop و screenX و screenY كلها خصائص للقراءة فقط. تعديل قيمهم لن يتسبب في تحريك النافذة.
عندما يتم تعظيم النافذة ، لا تزال القيم التي يتم إرجاعها بواسطة كل متصفح مختلفة. يعود Firefox إلى اليسار: -7 ؛ أعلى: -7. لا يزال Chrome يعود إلى اليسار: 0 ؛ أعلى: 0. يعود IE9+ دائمًا إلى اليسار: -7 ؛ أعلى: -7 بغض النظر عما إذا كان يتم عرض شريط القائمة أم لا. لا يزال Safari يعود إلى اليسار: -8 ؛ أعلى: -8 بسبب علةه الخاصة
<div id = 'mydiv'> </viv> <script> var timer = setInterval (function () {mydiv.innerhtml = 'left:' + window.screenx + '؛ top:' + window.script>}) mydiv.onclick = function ()النتيجة: اليسار: 0 ؛ الأعلى: 93
متناسق
طريقة الكتابة المتوافقة للحصول على موقع النافذة هي كما يلي
[ملاحظة] نظرًا للتطبيقات المختلفة لكل متصفح ، فمن المستحيل الحصول على قيمة الإحداثيات الدقيقة في ظل ظروف المتصفح المتقاطع.
var leftpos = (typeof window.screenleft == "number")؟ window.screenleft: window.screenx ؛ var toppos = (typeof window.screentop == "number")؟ window.screentop: window.screeny ؛ console.log (LeftPos ، toppos) ؛
【2】 Mobile
استخدم طرق moveTo() و moveBy() لنقل النافذة إلى موقع جديد. يتم دعم هاتين الطريقتين فقط من قبل متصفح IE.
يتلقى moveTo() معلمتين ، وهما القيم الإحداثي X و Y للموضع الجديد
<div id = "mydiv"> انقر هنا </div> <script> // انقل النافذة إلى (0،0) mydiv.onclick = function () {window.moveto (0،100) ؛ } </script> يتلقى moveBy() معلمتين ، وهما عدد البكسلات تتحرك في اتجاهات أفقية ورأسية.
<div id = "mydiv"> انقر هنا </div> <script> // حرك النافذة لأسفل بمقدار 100 بكسل mydiv.onclick = function () {window.moveby (0،100) ؛ } </script>حجم النافذة
【1】 الحصول على
تُستخدم خصائص outerWidth outerHeight لتمثيل حجم نافذة المتصفح نفسها.
[ملاحظة] لا يدعم IE8-Browser
// chrome يعود الخارجي: 1920 ؛ Outerheight: 1030 // ie9 + و Firefox Return Outerwidth: 1550 ؛ OuterHeight: 838 // safari يعود خارجية window.outerheight: ' + window.outerheight
النتيجة: العرض الخارجي: 1440 ؛ Outerheight: 743
تُستخدم خصائص innerWidth innerHeight لتمثيل حجم الصفحة ، والذي يساوي في الواقع حجم نافذة المتصفح مطروحًا منه عرض حدود المتصفح وأشرطة القائمة ، وأشرطة العناوين ، وأشرطة الحالة ، وما إلى ذلك.
[ملاحظة] بما أن <frame> نفسه يحتوي أيضًا على خصائص نافذة ، إذا كان هناك إطار في الصفحة ، فإن خصائص innerWidth innerHeight في الإطار تشير إلى خصائص innerWidth innerHeight للإطار نفسه.
// يعود Chrome Innerwidth: 1920 ؛ innerheight: 971 // ie9+ returns Innerwidth: 1536 ؛ Innerheight: 768 // Firefox Returns Innerwidth: 1536 ؛ innerheight: 755 // safari innerwidth: 1536 ؛ innerneight: "innerwidth: ' + window.innerwidth +' ؛ innerheight: ' + window.innerheight:' + window.innerheight
النتيجة: Innerwidth: 701 ؛ Innerheight: 40
document.documentElement.clientWidth و document.documentElement.clientHeight في DOM يمكن أن تمثل أيضًا حجم الصفحة ، مع إرجاع نفس القيمة مثل innerWidth و innerHeight
[ملاحظة] وبالمثل ، إذا تم الوصول إلى الإطار ، تشير هاتان الخصائص أيضًا إلى خصائص الإطار.
// chrome يعود Innerwidth: 1920 ؛ innerheight: 971 // ie9+ returns innerwidth: 1536 ؛ Innerheight: 768 // Firefox يعود Innerwidth: 1536 ؛ Innerheight: 755 // Safari يعود Innerwidth: 1536 ؛ innerheight: 764 document.body.innerhtml = 'clientwidth:' + document.documentElement.clientwidth + '؛ clientheight:' + document.documentElement.clientheight
النتيجة: عميل العميل: 701 ؛ العميل: 40
على الرغم من أن هذين النوعين من السمات يمثلان نفس القيمة على الكمبيوتر ، إلا أنه لهما استخدامات مختلفة على جانب الهاتف المحمول. تمثل innerWidth و innerHeight منصب Visual Viewport ، أي منطقة موقع الويب الذي يراه المستخدم ؛ document.documentElement.clientWidth و clientHeight تمثل منفذ عرض التصميم ، في إشارة إلى حجم تخطيط CSS.
【2】 التعديل
استخدم طريقتين من resizeTo() و resizeBy() لتغيير حجم نافذة المتصفح
[ملاحظة] دعم متصفحات IE و Safari فقط
يتلقى resizeTo() معلمتين: العرض الجديد والارتفاع الجديد لنافذة المتصفح
<div id = "mydiv"> انقر هنا </div> <script> mydiv.onclick = function () {// تغيير حجم نافذة المتصفح إلى 200،200 window.resizeto (200،200) ؛} </script> يتلقى resizeBy() معلمتين: الفرق بين عرض وارتفاع النافذة الجديدة للمستعرض والنافذة الأصلية
<div id = "mydiv"> انقر هنا </div> <script> mydiv.onclick = function () {// قلل عرض نافذة المتصفح بواسطة 100 window.resizeBy (-100،0) ؛} </script>افتح النافذة
يمكن أن تنتقل طريقة window.open() إلى عنوان URL معين أو فتح نافذة متصفح جديدة. تتلقى هذه الطريقة 4 معلمات: عنوان URL المراد تحميله ، هدف النافذة ، سلسلة ميزة ، ومواء منطقية تشير إلى ما إذا كانت الصفحة الجديدة تحل محل الصفحة التي تم تحميلها حاليًا في سجل المتصفح.
المعلمة
【1】 غالبًا ما يجب تمرير المعلمة الأولى فقط ، والافتتاح الافتراضي في نافذة جديدة
<div id = "mydiv"> انقر هنا </div> <script> mydiv.onclick = function () {window.open ("http://baidu.com") ؛} </script>【2】 تشير المعلمة الثانية إلى اسم النافذة أو الإطار الموجود ، أو طريقة الفتح لـ _self ، _parent ، _top ، _blank ، إلخ.
<div id = "mydiv"> انقر هنا </div> <script> // افتح mydiv.onclick = function () {window.open ("http://baidu.com" ، '_ self') ؛} </script>【3】 المعلمة الثالثة عبارة
<div id = "mydiv"> انقر هنا </div> <script> mydiv.onclick = function () {// افتح صفحة ويب QQ مع ارتفاع 500 ، عرض 500 ، إحداثي عمودي لـ 0 ، إحداثي أفقي من 200 في جديد window.open ("http://qq.com" ، "_blank" ، "الارتفاع = 500 ، العرض = 500 ، أعلى = 0 ، اليسار = 200")} </script>[4] المعلمة الرابعة مفيدة فقط إذا كانت المعلمة الثانية تسمى نافذة موجودة. إنها قيمة منطقية تعلن ما إذا كان عنوان URL المحدد بالمعلمة الأولى هو استبدال الإدخال الحالي في سجل تصفح النوافذ (صحيح) أو في حالة إنشاء إدخال جديد في تاريخ تصفح النوافذ (خطأ) وهو الإعداد الافتراضي
قيمة الإرجاع
قيمة إرجاع طريقة open() هي كائن نافذة النافذة الجديدة
<div id = "mydiv"> انقر هنا </div> <script> mydiv.onclick = function () {var w = window.open () ؛ w.document.body.innerhtml = 'test text' ؛} </script>يحتوي كائن النافذة الذي تم إنشاؤه حديثًا على خاصية فتاحة ، والتي تحتوي على كائن النافذة الأصلي الذي فتحه
<div id = "mydiv"> انقر هنا </div> <script> mydiv.onclick = function () {var w = window.open () ؛ console.log (W.Opener === Window) ؛ // True} </script>فلتر
معظم المتصفحات لديها أنظمة تصفية منبثقة. بشكل عام ، يتم استدعاء طريقة open() فقط عندما ينقر المستخدم يدويًا على زر أو رابط. عادةً ما يفشل رمز JavaScript عند محاولة فتح نافذة منبثقة عند تحميل المتصفح في البداية. إذا تم اعتراضها ، فإن قيمة الإرجاع undefined
<div id = "mydiv"> انقر هنا </div> <script> var w = window.open () ؛ console.log (w) ؛ // undefined </script>
تغلق النافذة
تمامًا مثل الطريقة open() تفتح نافذة جديدة ، close() نافذة. إذا تم إنشاء كائن النافذة W ، فيمكنك استخدام الكود التالي لإيقاف تشغيله
<div> <span id = "span1"> فتح نافذة </span> <span id = "span2"> إغلاق نافذة </span> </viv> <script> var w ؛ span1.onclick = function () {w = window.open () ؛} span2 }} </script> يحتوي الكائن W في النافذة الجديدة أيضًا على خاصية closed لاكتشاف ما إذا كانت مغلقة.
<div id = "mydiv"> انقر هنا </div> <script> // إظهار خطأ أولاً ، ثم truemydiv.onclick = function () {var w = window.open () ؛ console.log (w.closed) ؛ // false setTimeOut (function () {w.close () ؛ console.log (w.closed) ؛ // true} ، 1000) ؛ } </script>تطبيق صغير
يمكن للكائن الذي تم إرجاعه بواسطة window.open() تشغيل فتح وإغلاق نافذة مفتوحة حديثًا
<div id = "mydiv"> فتح النافذة </div> <script> var w = null ؛ mydiv.onclick = function () {// إذا لم يكن w غير موجود ، أي أنه لا يتم فتح نافذة جديدة ، أو يتم إغلاق النافذة الجديدة إذا (! w) {w = window.open ("http://baidu.com" ، "_blank" ، "height = 400 ، width = 400 ، top = 10 ، left = 10") ؛ mydiv.innerhtml = 'winding window' ؛ // إذا كانت W موجودة ، فهذا يعني أن النافذة الجديدة مفتوحة} {W.Close () ؛ ث = خالية ؛ mydiv.innerhtml = 'open window' ؛ }} </script>لخص
تقدم هذه المقالة بشكل أساسي العمليات الأساسية لنوافذ متصفح JavaScript. من السهل جدًا أن نفهم ولكن وظائف عملية للغاية. آمل أن يكون ذلك مفيدًا للاستخدام اليومي للجميع لجافا سكريبت.