สรุปการดำเนินงานขั้นพื้นฐานของหน้าต่างเบราว์เซอร์ใน JavaScript

ตำแหน่งหน้าต่าง

【 1 】รับ

เบราว์เซอร์ (Firefox ไม่รองรับ) ให้คุณสมบัติ screenLeft และ screenTop ซึ่งใช้เพื่อแสดงตำแหน่งของหน้าต่างที่สัมพันธ์กับด้านซ้ายและด้านบนของหน้าจอตามลำดับ

เมื่อหน้าต่างขยายใหญ่ที่สุดค่าที่ส่งคืนโดยแต่ละเบราว์เซอร์จะไม่เหมือนกันเมื่อเรียกใช้รหัสต่อไปนี้ Chrome กลับมาซ้าย: 0; Top: 0 IE กลับไปทางซ้าย: 0; ด้านบน: 56 (ถ้ามีแถบเมนูมันจะกลับไปทางซ้าย: 0; ด้านบน: 78) เพราะเช่นบันทึกระยะทางจากด้านซ้ายและด้านบนของหน้าจอไปยังพื้นที่ที่มองเห็นได้ของหน้าเว็บที่แสดงโดยวัตถุหน้าต่าง Safari กลับมาทางซ้าย: -8; top: -8 เนื่องจากข้อผิดพลาดของตัวเอง

 // ย้ายหน้าต่างจะมีการเปลี่ยนแปลงในค่า <div id = 'mydiv'> </div> <script> var timer = setInterval (ฟังก์ชัน () {mydiv.innerhtml = 'ซ้าย:' + window.screenleft + '; top:' + window.screentop;

ผลลัพธ์: ซ้าย: 0; ด้านบน: 93

คุณสมบัติ screenX และ screenY (IE8-) ยังให้ข้อมูลตำแหน่งหน้าต่างเดียวกัน

[หมายเหตุ] screenLeft , screenTop , screenX และ screenY เป็นคุณสมบัติแบบอ่านอย่างเดียวทั้งหมด การแก้ไขค่าของพวกเขาจะไม่ทำให้หน้าต่างเคลื่อนที่

เมื่อหน้าต่างขยายค่าสูงสุดค่าที่ส่งคืนโดยแต่ละเบราว์เซอร์ยังคงแตกต่างกัน Firefox กลับไปทางซ้าย: -7; Top: -7 Chrome ยังคงกลับมาทางซ้าย: 0; Top: 0 IE9+ กลับมาทางซ้ายเสมอ: -7; ด้านบน: -7 ไม่ว่าแถบเมนูจะปรากฏขึ้นหรือไม่ Safari ยังคงกลับมาทางซ้าย: -8; Top: -8 เนื่องจากข้อผิดพลาดของตัวเอง

 <div id = 'mydiv'> </div> <script> var timer = setInterval (function () {mydiv.innerhtml = 'ซ้าย:' + window.screenx + '; top:' + window.screeny;}) 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 】มือถือ

ใช้วิธี 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 ส่งคืน Outerwidth: 1920; outerheight: 1030 // ie9 + และ firefox return outerwidth: 1550; outerheight: 838 // safari ส่งคืน outerwidth: 1552; window.outerheight: ' + window.outerheight

ผลลัพธ์: Outerwidth: 1440; Outerheight: 743

คุณสมบัติ innerWidth และ innerHeight ใช้เพื่อแสดงขนาดหน้าซึ่งจริง ๆ แล้วเท่ากับขนาดหน้าต่างเบราว์เซอร์ลบความกว้างของพรมแดนของเบราว์เซอร์และแถบเมนูแถบที่อยู่แถบสถานะ ฯลฯ

[หมายเหตุ] เนื่องจาก <frame> เองก็มีคุณสมบัติหน้าต่างหากมีเฟรมในหน้าดังนั้นคุณสมบัติ innerWidth และ innerHeight ในเฟรมอ้างถึงคุณสมบัติ innerWidth และ innerHeight ของเฟรมเอง

 // Chrome ส่งคืน InnerWidth: 1920; InnerHeight: 971 // IE9+ returns InnerWidth: 1536; innerHeight: 768 // Firefox ส่งคืน InnerWidth: 1536; InnerHeight: 755 // Safari กลับมาในปี 1536; '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+ ส่งคืน InnerWidth: 1536; InnerHeight: 768 // Firefox ส่งคืน InnerWidth: 1536; InnerHeight: 755 // Safari ส่งคืน InnerWidth: 1536; innerHeight: 764 document.body.innerhtml = 'clientWidth:' + document.documentelement.clientWidth + '; clientHeight:' + document.documentelement.clientheiight

ผลลัพธ์: ClientWidth: 701; ClientHeight: 40

แม้ว่าแอตทริบิวต์ทั้งสองประเภทนี้จะแสดงถึงค่าเดียวกันบนคอมพิวเตอร์ แต่ก็มีการใช้งานที่แตกต่างกันในด้านมือถือ innerWidth และ innerHeight เป็นตัวแทนของ Visual Viewport นั่นคือพื้นที่ของเว็บไซต์ที่ผู้ใช้เห็น document.documentElement.clientWidth และ clientHeight เป็นตัวแทนของ Layout Viewport ซึ่งอ้างอิงถึงขนาดของเค้าโครง 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> <priscile> // เปิด mydiv.onclick = function () {window.open ("http://baidu.com", '_ self');} </script>

【 3 】พารามิเตอร์ที่สามคือสตริงการตั้งค่าที่คั่นด้วยเครื่องหมายจุลภาคซึ่งระบุว่าคุณสมบัติใดที่แสดงในหน้าต่างใหม่

 <div id = "mydiv"> คลิกที่นี่ </div> <script> mydiv.onclick = function () {// เปิดเว็บเพจ QQ ด้วยความสูง 500 ความกว้าง 500, พิกัดแนวตั้งของ 0, แนวนอนพิกัด 200 ในหน้าต่างใหม่ ("http://qq.com," </script>

[4] พารามิเตอร์ที่สี่มีประโยชน์เฉพาะในกรณีที่พารามิเตอร์ที่สองชื่อหน้าต่างที่มีอยู่ มันเป็นค่าบูลีนที่ประกาศว่า URL ที่ระบุโดยพารามิเตอร์แรกคือการแทนที่รายการปัจจุบันในประวัติการท่องหน้าต่าง (จริง) หรือไม่หรือควรสร้างรายการใหม่ในประวัติการเรียกดูหน้าต่าง (เท็จ) ซึ่งเป็นการตั้งค่าเริ่มต้น

ค่าส่งคืน

ค่าส่งคืนของวิธี open() เป็นวัตถุหน้าต่างของหน้าต่างใหม่

 <div id = "mydiv"> คลิกที่นี่ </div> <script> mydiv.onclick = function () {var w = window.open (); w.document.body.innerhtml = 'ทดสอบข้อความ';} </script>

วัตถุหน้าต่างที่สร้างขึ้นใหม่มีคุณสมบัติที่เปิดซึ่งถือวัตถุหน้าต่างดั้งเดิมที่เปิดอยู่

 <div id = "mydiv"> คลิกที่นี่ </div> <script> mydiv.onclick = function () {var w = window.open (); console.log (w.opener === หน้าต่าง); // 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> </div> <script> var w; span1.onclick = function () {w = window.open ();} span2.onclick = function () {ถ้า (w) {w.close (); }} </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", "ความสูง = 400, ความกว้าง = 400, ด้านบน = 10, ซ้าย = 10");); mydiv.innerhtml = 'ปิดหน้าต่าง'; // ถ้ามีอยู่ก็หมายความว่าหน้าต่างใหม่เปิด} else {w.close (); w = null; mydiv.innerhtml = 'เปิดหน้าต่าง'; }} </script>

สรุป

บทความนี้ส่วนใหญ่แนะนำการดำเนินงานพื้นฐานของหน้าต่างเบราว์เซอร์ JavaScript มันง่ายมากที่จะเข้าใจ แต่ฟังก์ชั่นที่ใช้งานได้จริงมาก ฉันหวังว่ามันจะเป็นประโยชน์กับการใช้ JavaScript ประจำวันของทุกคน