JavaScript จัดเตรียมชุดวัตถุที่มีหน้าต่างเป็นแกนกลางทำให้ตระหนักถึงการควบคุมการเข้าถึงของหน้าต่างเบราว์เซอร์ 6 วัตถุสำคัญถูกกำหนดใน JavaScript:
วัตถุหน้าต่างแสดงถึงหน้าต่างที่เปิดในเบราว์เซอร์
วัตถุเอกสารแสดงวัตถุเอกสารที่โหลดหน้าเว็บในเบราว์เซอร์
วัตถุตำแหน่งมีข้อมูล URL ปัจจุบันของเบราว์เซอร์
วัตถุนำทางมีข้อมูลเกี่ยวกับเบราว์เซอร์เอง
วัตถุหน้าจอมีข้อมูลเกี่ยวกับหน้าจอไคลเอนต์และความสามารถในการแสดงผล
วัตถุประวัติมีข้อมูลทางประวัติศาสตร์ของเบราว์เซอร์ที่เข้าถึงหน้าเว็บ
นอกเหนือจากวัตถุหน้าต่างแล้ววัตถุอีกห้าชิ้นยังเป็นคุณสมบัติของวัตถุหน้าต่าง ความสัมพันธ์ของพวกเขามีดังนี้:
1. วัตถุ Windows
วัตถุหน้าต่างเป็นวัตถุ Global JavaScript ดังนั้นคุณสมบัติและวิธีการใช้วัตถุหน้าต่างไม่จำเป็นต้องระบุ ตัวอย่างเช่น: แจ้งเตือนการโทรที่สมบูรณ์คือหน้าต่างจริง ๆ แล้วซึ่งมักจะละเว้นการอ้างอิงไปยังวัตถุหน้าต่าง
1. คุณสมบัติวิธีการและเหตุการณ์ของวัตถุ Windows
| ชื่อแอตทริบิวต์ | ผล | การสาธิต |
|---|---|---|
| ชื่อ | ระบุชื่อของหน้าต่าง | |
| พ่อแม่ | หน้าต่างหลักของหน้าต่างปัจจุบัน (เฟรม) ใช้เพื่อส่งคืนวิธีการและคุณสมบัติของวัตถุ | |
| เครื่องเปิด | ส่งคืนวัตถุหน้าต่างที่สร้างหน้าต่างปัจจุบันและใช้เพื่อส่งคืนวิธีการและคุณสมบัติของวัตถุ | |
| สูงสุด | มันแสดงถึงหน้าต่างหลักคือหน้าต่างระดับบนสุดและยังเป็นหน้าต่างหลักของหน้าต่างอื่น ๆ ทั้งหมด วิธีการและคุณสมบัติของหน้าต่างปัจจุบันสามารถเข้าถึงได้ผ่านวัตถุนี้ | |
| ตัวเอง | ส่งคืนวัตถุในหน้าต่างปัจจุบันซึ่งสามารถเข้าถึงวิธีการและคุณสมบัติของหน้าต่างปัจจุบันได้ | |
| defaultStatus | ส่งคืนหรือตั้งค่าเนื้อหาเริ่มต้นที่จะแสดงในแถบสถานะเบราว์เซอร์ | |
| สถานะ | ส่งคืนหรือตั้งค่าเนื้อหาที่ระบุที่จะแสดงในแถบสถานะเบราว์เซอร์ |
| ชื่อวิธี | ผล | การสาธิต |
|---|---|---|
| เตือน() | แสดงกล่องโต้ตอบการแจ้งเตือนที่มีข้อความและปุ่มตกลง | |
| ยืนยัน() | แสดงกล่องโต้ตอบยืนยัน | |
| พรอมต์ () | แสดงกล่องโต้ตอบพร้อมท์ที่แจ้งให้ผู้ใช้ป้อนข้อมูล | |
| เปิด() | เปิดหน้าต่างที่มีอยู่หรือสร้างหน้าต่างใหม่และโหลดเอกสารในหน้าต่างนั้น | |
| ปิด() | ปิดหน้าต่างที่เปิดอยู่ | |
| นำทาง () | แสดงหน้าเว็บที่ระบุในหน้าต่างปัจจุบัน | |
| Settimeout () | ตั้งค่าตัวจับเวลาและเรียกใช้ฟังก์ชั่นหลังจากช่วงเวลาที่กำหนดจะถูกส่งผ่าน | |
| ClearTimeout () | รีเซ็ตตัวจับเวลาที่ระบุ | |
| จุดสนใจ() | สร้างวัตถุหน้าต่างรับโฟกัสปัจจุบัน | |
| เบลอ() | ทำให้วัตถุหน้าต่างสูญเสียโฟกัสปัจจุบัน |
| เหตุการณ์ | อธิบาย | การสาธิต |
|---|---|---|
| การบรรทุก | เกิดขึ้นเมื่อไฟล์ HTML ถูกโหลดลงในเบราว์เซอร์ | |
| การโหลด | เกิดขึ้นเมื่อไฟล์ HTML ถูกลบออกจากเบราว์เซอร์ | |
| onfocus | เกิดขึ้นเมื่อหน้าต่างได้รับโฟกัส | |
| onblur | เกิดขึ้นเมื่อหน้าต่างสูญเสียโฟกัส | |
| onhelp | เกิดขึ้นเมื่อผู้ใช้กดปุ่ม F1 | |
| ทำให้เป็นสี | เกิดขึ้นเมื่อผู้ใช้ปรับขนาดหน้าต่าง | |
| onscroll | เกิดขึ้นเมื่อผู้ใช้เลื่อนหน้าต่าง | |
| ผู้กระทำความผิด | เกิดขึ้นเมื่อเกิดข้อผิดพลาดเมื่อโหลดไฟล์ HTML |
2. ฟังก์ชั่นหลักที่จัดทำโดยวัตถุหน้าต่าง:
ปรับขนาดและตำแหน่งของหน้าต่างเปิดหน้าต่างใหม่กล่องพรอมต์ระบบการควบคุมแถบสถานะและการดำเนินการตามกำหนดเวลา ต่อไปนี้เป็นคำอธิบายต่อไปนี้ของฟังก์ชั่น 5 ฟังก์ชั่นเหล่านี้
(1) ปรับขนาดและตำแหน่งของหน้าต่าง
วิธี | การใช้งาน | อธิบาย |
window.moveby เลื่อนหน้าต่างเบราว์เซอร์ไปยังตำแหน่งที่ระบุ (การวางตำแหน่งสัมพัทธ์) | window.moveby (dx, dy) | เพื่อการรักษาความปลอดภัยและการพิจารณาผู้ใช้ที่ดีสคริปต์ JavaScript ไม่ได้รับอนุญาตให้ใช้เพื่อย้ายหน้าต่างนอกพื้นที่ภาพ หน้าต่างเบราว์เซอร์จะต้องรับประกันว่าจะอยู่ในพื้นที่ภาพของหน้าจอเสมอ |
window.moveto เลื่อนหน้าต่างเบราว์เซอร์ไปยังตำแหน่งที่ระบุ (ตำแหน่งสัมบูรณ์) | window.moveby (x, y) | หากพิกัดที่ระบุ (x, y) วางหน้าต่างบางส่วนหรือทั้งหมดไว้นอกพื้นที่ที่มองเห็นหน้าต่างจะอยู่ใกล้กับขอบของหน้าจอมากที่สุด |
window.resizeby เปลี่ยนขนาดของหน้าต่างเบราว์เซอร์เป็นความกว้างและความสูงที่ระบุ (ปรับขนาดหน้าต่างค่อนข้าง) | window.resizeby (dw, dh) | |
window.resizeto เปลี่ยนขนาดของหน้าต่างเบราว์เซอร์เป็นความกว้างและความสูงที่ระบุ (ปรับขนาดหน้าต่างอย่างแน่นอน) | window.resizeto (w, h) | ความกว้างและความสูงที่ระบุไม่สามารถลบได้ |
(2) เปิดหน้าต่างใหม่
การใช้งาน: window.open ([url], [เป้าหมาย], [ตัวเลือก])
พารามิเตอร์ URL: URL ที่จะโหลดในหน้าต่างใหม่ หากไม่มีการระบุพารามิเตอร์หน้าว่างจะถูกโหลดตามค่าเริ่มต้น ตัวอย่างเช่น: window.open ("test.htm");
เป้าหมายพารามิเตอร์: เป้าหมายหรือชื่อของหน้าต่างที่เปิดใหม่
_Self โหลดหน้าใหม่ในหน้าต่างปัจจุบัน
_blank โหลดหน้าใหม่ในหน้าต่างใหม่
_parent โหลดหน้าใหม่ในหน้าต่างหลัก
_top โหลดหน้าใหม่ในหน้าต่างด้านบน
ตัวเลือกพารามิเตอร์: คุณสมบัติของหน้าต่างที่เปิดใหม่ประกอบด้วยตัวเลือกหลายตัวคั่นด้วยเครื่องหมายจุลภาคและแต่ละตัวเลือกมีชื่อและค่าของตัวเลือก
ตัวเลือก | อธิบาย |
ความสูง | ความสูงของหน้าต่างพิกเซลหน่วย |
ความกว้าง | ความกว้างของหน้าต่างพิกเซลหน่วย |
ซ้าย | ตำแหน่งขอบด้านซ้ายของหน้าต่าง |
สูงสุด | ตำแหน่งขอบด้านบนของหน้าต่าง |
เต็มหน้าจอ | ไม่ว่าจะเป็นแบบเต็มหน้าจอค่าเริ่มต้นไม่ใช่ |
ที่ตั้ง | ไม่ว่าจะแสดงแถบที่อยู่ค่าเริ่มต้นคือใช่ |
เมือก | ไม่ว่าจะแสดงแถบเมนูค่าเริ่มต้นคือใช่ |
ซึ่งปรับขนาดได้ | ไม่ว่าจะอนุญาตให้เปลี่ยนขนาดหน้าต่างค่าเริ่มต้นคือใช่ |
แถบเลื่อน | ไม่ว่าจะแสดงแถบเลื่อนค่าเริ่มต้นใช่ |
สถานะ | ไม่ว่าจะแสดงแถบสถานะค่าเริ่มต้นคือใช่ |
แถบชื่อเรื่อง | ไม่ว่าจะแสดงแถบชื่อเรื่องค่าเริ่มต้นคือใช่ |
แถบเครื่องมือ | ไม่ว่าจะแสดงแถบเครื่องมือค่าเริ่มต้นคือใช่ |
(3) กล่องพรอมต์ระบบ
window.alert แสดงกล่องพรอมต์ข้อความ, หน้าต่างการใช้งาน alert ([ข้อความ]); (หมายเหตุ: วัตถุหน้าต่างถูกละเว้นโดยทั่วไปและใช้การแจ้งเตือนโดยตรง)
Window.Confirm แสดงกล่องโต้ตอบยืนยันที่มีปุ่ม OK และ CANCEL
window.prompt แสดงกล่องพรอมต์ข้อความที่มีกล่องป้อนข้อความ
การใช้งาน: window.prompt ([ข้อความ], [ค่าเริ่มต้น]); ข้อความคือข้อความที่แสดงบนกล่องพรอมต์และค่าเริ่มต้นคือค่าเริ่มต้นของกล่องข้อความ
(4) การควบคุมแถบสถานะ
ควบคุมผ่าน Window.status Property ตัวอย่างเช่น: window.status = "ข้อผิดพลาดพรอมต์"; การทำเช่นนี้จะส่งผลกระทบต่อประสบการณ์ผู้ใช้ดังนั้นจึงไม่แนะนำให้แก้ไขข้อมูลแถบสถานะ
(5) การดำเนินการตามกำหนดเวลา
การดำเนินการตามกำหนดเวลาเป็นฟังก์ชั่นที่ใช้กันทั่วไปในการพัฒนาเว็บ ในการพัฒนาตามเทคโนโลยี AJAX มีแอปพลิเคชันประเภทหนึ่งที่ต้องการเข้าถึงเซิร์ฟเวอร์แบ็กเอนด์เป็นประจำและอัปเดตหน้าส่วนหน้า การใช้งานแอปพลิเคชันประเภทนี้มักจะขึ้นอยู่กับฟังก์ชั่นการทำงานของเวลา
มีฟังก์ชั่นการใช้งานเวลาสี่รายการ: window.setInterval, window.clearinterval, window.settimeout และ window.cleartimeout ฟังก์ชั่นทั้งสี่นี้เป็นวิธีการของวัตถุหน้าต่างซึ่งหมายความว่าการดำเนินการตามกำหนดเวลาในเบราว์เซอร์จะเสร็จสิ้นโดยหน้าต่างเบราว์เซอร์ ต่อไปนี้เป็นการแนะนำรายละเอียดเกี่ยวกับการใช้วิธีการทั้งสี่นี้
① window.setInterval ตั้งค่าตัวจับเวลาและดำเนินการหน้าต่างรหัสที่ระบุ SetInterval (รหัสเวลา);
คำอธิบาย: พารามิเตอร์รหัสสามารถเป็นฟังก์ชันหรือรหัส JavaScript ในรูปแบบของสตริง
พารามิเตอร์เวลาคือช่วงเวลาสำหรับการดำเนินการรหัสและหน่วยคือ MS
② window.clearinterval ล้างตัวจับเวลาที่ตั้งค่าโดยหน้าต่างฟังก์ชั่น setInterval clearInterval (เวลา);
③ window.settimeout ตั้งค่าตัวจับเวลาและดำเนินการหน้าต่างรหัสที่ระบุ Settimeout (รหัสเวลา);
หมายเหตุ: พารามิเตอร์รหัสสามารถเป็นฟังก์ชันหรือรหัส JavaScript ในรูปแบบของสตริง ความแตกต่างระหว่าง settimeout และ setInterval คือ settimeout จะเรียกใช้รหัสที่ระบุเพียงครั้งเดียว
พารามิเตอร์เวลาคือช่วงเวลาสำหรับการดำเนินการรหัสและหน่วยคือ MS
④ window.leartimeout ล้างตัวจับเวลาที่ตั้งค่าโดยหน้าต่างฟังก์ชัน settimeout cleartimeout (เวลา);
คำอธิบายโดยละเอียดข้างต้นของวัตถุหน้าต่างซึ่งเป็นหนึ่งในวัตถุเบราว์เซอร์ JavaScript คือเนื้อหาทั้งหมดที่ใช้ร่วมกันโดยตัวแก้ไข ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น