Ecmascript เป็นแกนหลักของ JavaScript แต่เมื่อใช้ JavaScript ในเว็บจากนั้น BOM (โมเดลวัตถุเบราว์เซอร์) เป็นแกนจริง
วัตถุหลักของ BOM คือหน้าต่างซึ่งแสดงถึงอินสแตนซ์ของเบราว์เซอร์
ในเบราว์เซอร์วัตถุหน้าต่างเป็นทั้งอินเทอร์เฟซสำหรับ JavaScript เพื่อเข้าถึงหน้าต่างเบราว์เซอร์และวัตถุส่วนกลางที่ระบุโดย ECMAScript นั่นคือตัวแปรวัตถุและฟังก์ชั่นใด ๆ ที่กำหนดไว้ในหน้าเว็บจะใช้หน้าต่างเป็นวัตถุทั่วโลก
1. ขอบเขตทั่วโลก
เนื่องจากวัตถุหน้าต่างมีบทบาทของวัตถุทั่วโลกวัตถุทั้งหมดตัวแปรและฟังก์ชั่นที่ประกาศในขอบเขตทั่วโลกจะกลายเป็นคุณสมบัติและวิธีการของหน้าต่าง
ยังคงมีความแตกต่างระหว่างการกำหนดตัวแปรทั่วโลกและการกำหนดแอตทริบิวต์บนวัตถุหน้าต่าง: ตัวแปรส่วนกลางไม่สามารถลบได้ผ่านการลบในขณะที่แอตทริบิวต์ที่กำหนดไว้ในวัตถุหน้าต่างก็โอเค
var อายุ = 28; window.color = "สีแดง"; // ใน IE <9 ข้อผิดพลาดจะถูกโยนและหน้าต่างลบเท็จจะถูกส่งกลับในเบราว์เซอร์อื่น ๆ // ใน IE <9 ข้อผิดพลาดจะถูกโยนลงไปและหน้าต่างลบจริงสีจะถูกส่งกลับในเบราว์เซอร์อื่น ๆ // ส่งคืนการแจ้งเตือนที่แท้จริง (window.age); // 28 Alert (window.color); // ไม่ได้กำหนด
เมื่อเพิ่มแอตทริบิวต์หน้าต่างโดยใช้คำสั่ง VAR มีคุณสมบัติชื่อ [[กำหนดค่า]] ค่าของคุณสมบัตินี้ถูกตั้งค่าเป็นเท็จดังนั้นคุณลักษณะที่กำหนดไว้ในวิธีนี้ไม่สามารถลบได้โดยการลบ
ข้อผิดพลาดจะถูกโยนลงเมื่อพยายามเข้าถึงตัวแปรที่ไม่ได้ประกาศ แต่ด้วยการสอบถามวัตถุหน้าต่างคุณสามารถรู้ได้ว่ามีตัวแปรที่ไม่ได้ประกาศหรือไม่
// ข้อผิดพลาดถูกโยนลงที่นี่เนื่องจาก OldValue ไม่ได้ประกาศ var newValue = oldValue; // ข้อผิดพลาดไม่ได้ถูกโยนทิ้งไว้ที่นี่เพราะนี่เป็นแบบสอบถามคุณสมบัติ var newValue = window.oldValue // Alert (newValue); // ไม่ได้กำหนด
ในความเป็นจริงวัตถุจาวาสคริปต์ทั่วโลกจำนวนมากเช่นการตั้งค่าและการนำทางเป็นคุณสมบัติของวัตถุหน้าต่าง
2. ความสัมพันธ์ของหน้าต่างและกรอบงาน
หากหน้ามีเฟรมแต่ละเฟรมจะมีวัตถุหน้าต่างของตัวเองและถูกบันทึกไว้ในคอลเลกชันเฟรม
ในการรวบรวมเฟรมสามารถเข้าถึงได้ผ่านดัชนีตัวเลขหรือชื่อเฟรม
<html> <head> <title> ตัวอย่างเฟรม </title> </head> <frameset rows = "160,*"> <frame src = "frame.htm" name = "topframe"> <frameset cols = "50%, 50%"> name = "RightFrame"> </frameset> </frameset> </html>
สำหรับตัวอย่างนี้เฟรมเวิร์กด้านบนสามารถอ้างอิงได้โดย window.frames [0] หรือ window.frames ["topframe"] อย่างไรก็ตามเป็นการดีที่สุดที่จะใช้ top.frames [0] เพื่อเข้าถึงเฟรมเวิร์ก
วัตถุด้านบน ชี้ไปที่เฟรมเวิร์กเลเยอร์สูงสุด (ด้านนอก) นั่นคือหน้าต่างเบราว์เซอร์ การใช้มันช่วยให้มั่นใจได้ว่าเฟรมอื่นเข้าถึงได้อย่างถูกต้องในเฟรมเดียว
วัตถุหน้าต่างอื่นที่ตรงข้ามกับวัตถุด้านบนคือพาเรนต์ วัตถุหลัก จะชี้ไปที่เฟรมเวิร์กโดยตรงของเฟรมเวิร์กปัจจุบันเสมอ
นอกจากนี้ยังมี วัตถุตัวเอง ซึ่งชี้ไปที่หน้าต่างเสมอ ในความเป็นจริงตัวเองและหน้าต่างสามารถใช้ร่วมกันได้ วัตถุประสงค์ของการแนะนำวัตถุตนเองนั้นเป็นเพียงการสอดคล้องกับวัตถุด้านบนและวัตถุหลักเท่านั้น
วัตถุทั้งหมดเหล่านี้เป็นคุณสมบัติของหน้าต่างและสามารถใช้กับ window.parent หรือ window.top
3. ตำแหน่งหน้าต่าง
เบราว์เซอร์ส่วนใหญ่ให้ภาพหน้าจอและหน้าจอซึ่งใช้เพื่อแสดงตำแหน่งของหน้าต่างที่สัมพันธ์กับด้านซ้ายและด้านบนของหน้าจอตามลำดับ FF ให้ข้อมูลหน้าต่างเดียวกันในคุณสมบัติ ScreenX และ Screeny และ Safari จำนวน CHORME ยังรองรับคุณสมบัติทั้งสองนี้ในเวลาเดียวกัน
ใช้รหัสต่อไปนี้เพื่อรับตำแหน่งซ้ายและด้านบนของหน้าต่างข้ามเบราว์เซอร์
var leftPos = (typeof window.screenleft == "number")? window.screenleft: window.screenx; var toppos = (typeof window.screentop == "number")? window.screentop: window.screeny;
เป็นที่น่าสังเกตว่าใน IE และ Opera, Screenleft และ Screentop บันทึกระยะทางจากด้านซ้ายและด้านบนของหน้าจอไปยังพื้นที่ที่มองเห็นได้ของหน้าเว็บที่แสดงโดยวัตถุหน้าต่าง ใน Chrome, FF และ Safari, Screeny และ Screentop บันทึกค่าพิกัดของเบราว์เซอร์ทั้งหมดไปยังหน้าจอ
ผลลัพธ์ที่ได้คือค่าพิกัดที่แน่นอนที่ด้านซ้ายและด้านบนของหน้าต่างไม่สามารถรับได้ในสภาวะข้ามเบราว์เซอร์
การใช้วิธีการ moveto () และ moveby () หน้าต่างสามารถเคลื่อนย้ายไปยังตำแหน่งใหม่ได้อย่างถูกต้อง ทั้งสองวิธีได้รับพารามิเตอร์สองตัว Moveto () ได้รับพิกัดของแกน x และ y และ Moveby () ได้รับพิกเซลที่เคลื่อนที่
// เลื่อนหน้าจอไปยัง Moveto ซ้ายบน (0,0); // เลื่อนหน้าต่างซ้ายด้วย 50px moveby (-50,0);
อย่างไรก็ตามเบราว์เซอร์ทั้งสองวิธีนี้อาจถูกปิดใช้งาน สองวิธีนี้ใช้ได้เฉพาะกับวัตถุหน้าต่างด้านนอกสุดเท่านั้นและไม่สามารถใช้ได้กับเฟรมเวิร์ก
4. ขนาดหน้าต่าง
เบราว์เซอร์กระแสหลักมีคุณสมบัติ 4 ประการสำหรับการกำหนดขนาดหน้าต่าง: InnerWidth, Innerhight, Outerwidth และ Outerhight
ใน IE9+, Safari, และ FF, Outerwidth และ Outerhight กลับขนาดของหน้าต่างเบราว์เซอร์เอง (ไม่ว่าจะเข้าถึงเฟรมเวิร์กจากเฟรมเวิร์ก) แต่ในโอเปร่าค่าของคุณสมบัติทั้งสองนี้แสดงขนาดของคอนเทนเนอร์มุมมองหน้า (ขนาดของหน้าต่างแท็บเดียว) InnerWidth และ Innerhight แสดงขนาดของมุมมองหน้าในคอนเทนเนอร์ (ลบความกว้างของเส้นขอบ) แต่ในโครเมี่ยมคุณสมบัติทั้ง 4 เหล่านี้แสดงถึงขนาดของวิวพอร์ตมากกว่าขนาดเบราว์เซอร์
IE9 ไม่ได้ให้คุณลักษณะเพื่อให้ได้ขนาดหน้าต่างเบราว์เซอร์มาก่อน อย่างไรก็ตามมันให้ข้อมูลเกี่ยวกับพื้นที่ภาพของหน้าผ่าน DOM
ใน IE, FF, Chrome, Opera และ Safari ข้อมูลหน้าวิวพอร์ตจะถูกเก็บไว้ใน Document.documentElement.ClientWidth และ Document.documentElement.Clienthight ใน 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; } else {pagewidth = document.body.clientwidth; pageHeight = document.body.clientheight; }} การแจ้งเตือน ("ความกว้าง:" + pagewidth); การแจ้งเตือน ("ความสูง:" + pageheight);สำหรับอุปกรณ์มือถือ, window.innerWidth และ window.innerhight ถือวิวพอร์ตที่มองเห็นได้ซึ่งเป็นขนาดของพื้นที่หน้าบนหน้าจอ เบราว์เซอร์ IE มือถือจำเป็นต้องได้รับข้อมูลเดียวกันผ่าน Document.documentElement.ClientWidth และ Document.documentElement.Clienthight
ทั้งวิธี resizeto () และ resizeby () สามารถใช้เพื่อปรับขนาดของหน้าต่างเบราว์เซอร์ ทั้งสองวิธีได้รับพารามิเตอร์สองตัว Resizeto () ได้รับความกว้างใหม่และความสูงใหม่ของหน้าต่างเบราว์เซอร์และ Resizeby () ได้รับความแตกต่างของความกว้างและความแตกต่างระหว่างหน้าต่างใหม่และหน้าต่างเก่า
// ปรับเป็น 100*100 resizeto (100,100); // ปรับเป็น 200*150 Moveby (100,50);
อย่างไรก็ตามเบราว์เซอร์ทั้งสองวิธีนี้อาจถูกปิดใช้งาน สองวิธีนี้ใช้ได้เฉพาะกับวัตถุหน้าต่างด้านนอกสุดเท่านั้นและไม่สามารถใช้ได้กับเฟรมเวิร์ก
5. นำทางและเปิดหน้าต่าง
วิธี window.open () สามารถเปิด URL เฉพาะหรือหน้าต่างเบราว์เซอร์ใหม่ วิธีนี้ได้รับ 4 พารามิเตอร์: URL, เป้าหมายหน้าต่าง, สตริงคุณลักษณะและค่าบูลีนที่ระบุว่าหน้าใหม่จะแทนที่หน้าปัจจุบันหรือไม่
ผุดขึ้นมา
พารามิเตอร์ต่างๆ
ในหมู่พวกเขาใช่/ไม่สามารถใช้ 1/0; PixelValue เป็นค่าเฉพาะพิกเซลหน่วย
พารามิเตอร์ ช่วงค่า คำอธิบาย
ลดลงเสมอ | ใช่/ไม่ใช่ | ระบุ windows จะถูกซ่อนอยู่หลังหน้าต่างทั้งหมด
เสมอ | ใช่/ไม่ใช่ | ระบุ windows ที่แขวนอยู่เหนือ Windows ทั้งหมด
ขึ้นอยู่กับ | ใช่/ไม่ใช่ | ไม่ว่าหน้าต่างแม่จะถูกปิดในเวลาเดียวกัน
ไดเรกทอรี | ใช่/ไม่ใช่ | คอลัมน์ไดเรกทอรีของ NAV2 และ 3 มองเห็นได้หรือไม่?
ความสูง | PixelValue | ความสูงของหน้าต่าง
hotkeys | ใช่/ไม่ใช่ | ตั้งค่า Hotkey ทางออกอย่างปลอดภัยในหน้าต่างโดยไม่มีแถบเมนู
InnerHeight | PixelValue ความสูงของพิกเซลในหน้าต่าง
InnerWidth | PixelValue | PixelWidth ของเอกสารในหน้าต่าง
สถานที่ | ใช่/ไม่ใช่ | แถบตำแหน่งมองเห็นได้หรือไม่?
Menubar | ใช่/ไม่ใช่ | แถบเมนูมองเห็นได้หรือไม่?
Outerheight | PixelValue | ตั้งค่าความสูงของพิกเซลของหน้าต่าง (รวมถึงเส้นขอบตกแต่ง)
OuterWidth | PixelValue | ตั้งค่าความกว้างของพิกเซลของหน้าต่าง (รวมถึงเส้นขอบตกแต่ง)
resizable | ใช่/ไม่ใช่ | ขนาดหน้าต่างปรับได้หรือไม่?
ScreenX | PixelValue | ความยาวพิกเซลของหน้าต่างไปยังเส้นขอบด้านซ้ายของหน้าจอ
Screeny | PixelValue | ความยาวพิกเซลของหน้าต่างไปยังขอบเขตบนของหน้าจอ
Scrollbars | ใช่/ไม่ใช่ | ไม่ว่าจะมีแถบเลื่อนอยู่ในหน้าต่าง
TitleBar | ใช่/ไม่ใช่ | คอลัมน์ชื่อหน้าต่างมองเห็นได้หรือไม่?
Toolbar | ใช่/ไม่ใช่ | แถบเครื่องมือหน้าต่างมองเห็นได้หรือไม่?
ความกว้าง | PixelValue | Window Pixel Width
z-look | ใช่/ไม่ใช่ | ไม่ว่าหน้าต่างจะลอยอยู่บนหน้าต่างอื่น ๆ หลังจากเปิดใช้งาน
ตัวอย่าง:
window.open ('page.html', 'newWindow', 'ความสูง = 100, ความกว้าง = 400, ด้านบน = 0, ซ้าย = 0, แถบเครื่องมือ = ไม่, menubar = ไม่, scrollbars = ไม่, resizable = no, location = no, สถานะ = ไม่')หลังจากเรียกใช้สคริปต์แล้ว page.html จะถูกเปิดในรูปแบบใหม่ Newwindow ด้วยความกว้าง 100, ความสูง 400, 0 พิกเซลจากด้านบนของหน้าจอ, 0 พิกเซลจากด้านซ้ายของหน้าจอไม่มีแถบเครื่องมือไม่มีแถบเมนูไม่มีแถบเลื่อนไม่มีแถบที่อยู่และไม่มีแถบสถานะ
6. การโทรและการหมดเวลาเป็นระยะ ๆ
JavaScript เป็นภาษาแบบเธรดเดี่ยว แต่อนุญาตให้ดำเนินการรหัสการกำหนดเวลาในช่วงเวลาที่กำหนดโดยการตั้งค่าการหมดเวลาและเวลาช่วงเวลา อดีตดำเนินการรหัสหลังจากเวลาที่กำหนดในขณะที่หลังถูกเรียกหนึ่งครั้งสำหรับแต่ละเวลาที่กำหนด
หมดเวลาโทร setTimeout ()
เมธอด settimeout () ยอมรับพารามิเตอร์สองพารามิเตอร์พารามิเตอร์แรกคือฟังก์ชันและพารามิเตอร์ที่สองคือเวลา (หน่วยของ microseconds) ซึ่งส่งคืน ID ตัวเลข
settimeout (function () {Alert ("Hello!");}, 1000);หลังจากการโทร SetTimeOut () วิธีการจะส่งคืน ID ตัวเลขแสดงการโทรหมดเวลาและการโทรหมดเวลาสามารถยกเลิกได้
var timeoutid = settimeout (function () {alert ("hello!");}, 1000); ClearTimeOut (TIMEOUTID);setInterval การโทรเป็นระยะ ๆ ()
เมธอด setInterval () ยอมรับพารามิเตอร์สองพารามิเตอร์พารามิเตอร์แรกคือฟังก์ชันพารามิเตอร์ที่สองคือเวลา (หน่วยไมโครวินาที) และส่งคืน ID ตัวเลข
setInterval (function () {Alert ("Hello!");}, 1000);ยกเลิกการโทรไปยัง ClearInterval () และยอมรับรหัสการโทรแบบไม่ต่อเนื่องของพารามิเตอร์
var intervalid = null; var span = document.createElement ("span"); // สร้าง span node span.id = "เวลา"; // ตั้งค่า span id document.body.appendchild (span); // เพิ่มฟังก์ชั่น span upermentNumber () {var now = new date (); var timestr = now.tolocaletimestring (); span.innerText = timestr; num ++; if (num == 10) {clearInterval (intervalid); // เวลายังคงไม่เปลี่ยนแปลงหลังจากสิบวินาที}} intervalid = setInterval (เพิ่มจำนวน, 1,000);ลองใช้การโทรหมดเวลาแทนการโทรไม่ต่อเนื่อง
var num = 0; var max = 10; ฟังก์ชั่นเพิ่มขึ้น () {num ++; if (num <max) {settimeout (uprementNumber, 1000); } else {แจ้งเตือน ("ตกลง"); }} settimeout (เพิ่มขึ้น, 1,000);7. กล่องโต้ตอบระบบ
การแจ้งเตือนกล่องคำเตือน ()
การแจ้งเตือน ("ยินดีต้อนรับ!");กล่องข้อมูลยืนยัน () มีปุ่มยกเลิก
ถ้า (ยืนยัน ("คุณเห็นด้วยหรือไม่")) {แจ้งเตือน ("เห็นด้วย"); } else {Alert ("ไม่เห็นด้วย"); -พรอมต์ () แจ้งให้ผู้ใช้ป้อนข้อความบางส่วน
var result = prompt ("คุณเคารพนามสกุลของคุณ?", ""); ถ้า (ผลลัพธ์! == null) {แจ้งเตือน ("ยินดีต้อนรับ" +ผลลัพธ์); -คำอธิบายโดยละเอียดข้างต้นของ BOM (วัตถุหน้าต่าง) ใน JavaScript คือเนื้อหาทั้งหมดที่แชร์โดยตัวแก้ไข ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น