จัดระเบียบและสรุปการดำเนินการ BOM ทั่วไปใน JavaScript

เหตุการณ์ทั่วไปของวัตถุหน้าต่าง

• เหตุการณ์การโหลดหน้าต่าง:

  • window.onload: เหตุการณ์การโหลดหน้า เหตุการณ์นี้จะเกิดขึ้นเมื่อเนื้อหาเอกสารถูกโหลดอย่างสมบูรณ์ (รวมถึงรูปภาพ ไฟล์สคริปต์ ไฟล์ CSS ฯลฯ ) และเรียกใช้ฟังก์ชันการประมวลผล
  • document.addEventListener('DOMContentLoaded', function(){}): เฉพาะเมื่อการโหลด DOM เสร็จสมบูรณ์ ไม่รวมสไตล์ชีท รูปภาพ แฟลช และ

• เหตุการณ์ความเข้ากันได้เพื่อปรับขนาดหน้าต่าง:

  • window.onresize: ปรับขนาดหน้าต่างการโหลดเหตุการณ์

• window สามารถใช้เมธอด .open() เพื่อนำทางไปยัง URL ที่ระบุหรือเปิดหน้าต่างเบราว์เซอร์ใหม่

  • วิธีนี้จะรับพารามิเตอร์ 4 ตัว ได้แก่ URL ที่จะโหลด หน้าต่างเป้าหมาย สตริงอักขระ และการแสดงหน้าต่างใหม่ ในประวัติเบราว์เซอร์ จะแสดงค่าบูลีนของหน้าที่โหลดอยู่ในปัจจุบันหรือ
  • window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

• ตัวจับเวลา:

  • setInterval(ตัวจัดการ: ใดๆ, หมดเวลา?: ยาว, อาร์กิวเมนต์…: ใด ๆ ): วนซ้ำ
  • clearInterval (จัดการ?: ยาว): ยกเลิก setInterval
  • setTimeout (ตัวจัดการ: ใด ๆ , หมดเวลา?: ยาว อาร์กิวเมนต์…: ใด ๆ ): clearTimeout ครั้งเดียว
  • (จัดการ?: ยาว): ยกเลิก setTimeout

• window.scroll(x, y)

• window.scrollTo(x, y): ทั้งสองแบบใช้เหมือนกันในการเปลี่ยนตำแหน่งของแนวนอนและ แถบเลื่อนแนวตั้ง โดยต้องมี แถบเลื่อนอยู่ที่หน้าต่าง

• เพจ scrollBy(x, y): การเลื่อนสะสมของแถบเลื่อน เลขบวกลงไป เลขลบขึ้นไป window.scrollBy(0, 10) : เมื่อถูกเรียกทุกๆ 100 มิลลิวินาที แถบเลื่อนจะย้าย 10 พิกเซล

• window.getComputedStyle(elem, pseudo-class)

• กล่องโต้ตอบ

  • alert
    • alert("prompt string")
    • จะแสดงกล่องคำเตือนขึ้นมาและแสดงข้อความสตริง prompt ในกล่องคำเตือน
  • ยืนยัน
    • ยืนยัน ("สตริงพร้อมท์")
    • แสดงกล่องยืนยันและยืนยันว่าสตริงพร้อมท์ปรากฏขึ้นในกล่อง
    • เมื่อผู้ใช้คลิกปุ่ม "ยืนยัน" มันจะคืนค่าเป็นจริง และคลิก "ยกเลิก" เพื่อส่งคืน
  • • พร้อมท์พร้อมท์เท็จ ("สตริงพร้อมท์" , "ค่าเริ่มต้น")
    • จะแสดงกล่องอินพุตและแสดงอักขระพร้อมท์ในกล่องอินพุต สตริง เพื่อรอการป้อนข้อมูลของผู้ใช้
    • เมื่อผู้ใช้คลิกปุ่ม "ยืนยัน" การป้อนข้อมูลของผู้ใช้จะถูกส่งกลับ เมื่อคลิกปุ่ม "ยกเลิก"

กลไกการดำเนินการ JavaScript

• • • ลง

ในสแต็กการดำเนินการในโหมดการดำเนินการแบบซิงโครนัส เมื่อรันสแต็กการดำเนินการ จะพบโค้ดอะซิงโครนัส JS (เหตุการณ์ ตัวจับเวลา อาแจ็กซ์ การโหลดทรัพยากร , error) จะถูกใส่ลงใน web API (คิวงาน) เมื่อโค้ดในสแต็กการดำเนินการเสร็จสมบูรณ์ ให้ไปที่คิวงานและนำโค้ดแรกไปดำเนินการ หลังจากดำเนินการ รับโค้ดหนึ่งจากคิวงานแล้วดำเนินการ และ ดำเนินการซ้ำ ๆ (วนรอบเหตุการณ์) จนกว่าการดำเนินการในคิวงานจะเสร็จสิ้น

วัตถุตำแหน่ง

window.history ใช้เพื่อรับ URL ที่อยู่ของหน้าปัจจุบันและเปลี่ยนเส้นทางเบราว์เซอร์ไปยังหน้าใหม่

http://www.itcast.cn:80/index.html?name=andy&age=1#link
http: โปรโตคอลการสื่อสาร www.itcast.cn: ชื่อโดเมน 80: พอร์ต index.html: path?name=andy&age=1: พารามิเตอร์ #link แฟรกเมนต์: จุดยึด,

แอตทริบิวต์ของวัตถุลิงก์:

• href*: รับหรือตั้งค่า
• โฮสต์ URL ทั้งหมด: ส่งคืนชื่อโฮสต์ (ชื่อโดเมน)
• ชื่อโฮสต์: ตั้งค่าหรือส่งคืนชื่อโฮสต์ของ
• การโพสต์ URL ปัจจุบัน: ส่งคืนชื่อพา ธ
• หมายเลขพอร์ต: ส่งคืนการค้นหาเส้นทาง
• *: ส่งคืน
• แฮชพารามิเตอร์: ส่งคืนส่วนย่อย (เนื้อหาหลังจาก #)
• โปรโตคอล: ตั้งค่าหรือ ส่งคืนเมธอดวัตถุโปรโตคอล

ของ URL ปัจจุบัน:

• กำหนด: เช่นเดียวกับ href คุณสามารถข้ามไปที่หน้า (หรือที่เรียกว่าหน้าเปลี่ยนเส้นทาง)
• แทนที่: แทนที่หน้าปัจจุบัน เนื่องจากประวัติไม่ได้ถูกบันทึก คุณจะไม่สามารถกลับไปที่การโหลดหน้า
• ซ้ำ
ได้
• : โหลดหน้าซ้ำ ซึ่งเทียบเท่ากับ

ออบเจ็กต์เนวิเกเตอร์

เนวิเกเตอร์: ออบเจ็กต์ที่ห่อหุ้มข้อมูลการกำหนดค่าเบราว์เซอร์ เปิด

• ใช้งานคุกกี้ ไม่ว่าจะเปิดใช้งานคุกกี้ในคุกกี้เบราว์เซอร์ปัจจุบัน
  หรือ
  • ไม่: พื้นที่เก็บข้อมูลบนไคลเอนต์และความจุมีขนาดเล็ก เบราว์เซอร์ที่แตกต่างกันมีขนาดแตกต่างกันและสามารถบันทึกคีย์ได้อย่างถาวร
  • ข้อเสีย: โดยเฉพาะ
ปลั๊กอิน
• • ข้อมูลส่วนบุคคลรั่วไหลง่าย ๆ
• สรุปข้อมูลปลั๊กอินทั้งหมดที่ติดตั้งโดยเบราว์เซอร์
• userAgent ชื่อเบราว์เซอร์หมายเลขเวอร์ชันเคอร์เนลและชุดอักขระอื่น ๆ
• ออนไลน์ คอมพิวเตอร์ออฟไลน์อยู่หรือไม่?
• แพลตฟอร์ม ส่งคืนแพลตฟอร์มระบบปฏิบัติการที่รันเบราว์เซอร์
• appCodeName ส่งคืนชื่อรหัสของเบราว์เซอร์
• appName ส่งคืนชื่อของเบราว์เซอร์
• appVersion ส่งคืนแพลตฟอร์มและข้อมูลเวอร์ชันของ

วัตถุประวัติเบราว์เซอร์ วัตถุ

window.history รวมถึงคอลเลกชันประวัติของเบราว์เซอร์ (url)

• ของเบราว์เซอร์ด้านหลัง ฟังก์ชัน: history.back()
• ฟังก์ชันส่งต่อของเบราว์เซอร์: history.forward()
• ป้อนหน้าใดหน้าหนึ่งในประวัติ: history.go()

หน้าจอ วัตถุ

window.screen มีข้อมูลเกี่ยวกับผู้ใช้

// หน้าจอ: รับขนาดความละเอียดของอุปกรณ์แสดงผล // ความละเอียดเต็ม: screen.widht/height
// วิธีระบุประเภทไคลเอนต์ที่เข้ากันได้กับความกว้างไคลเอนต์ทั้งหมด // หน้าจอขนาดใหญ่, หน้าจอกลาง, หน้าจอเล็ก, หน้าจอขนาดเล็กพิเศษ // lg md sm xs
// ทีวี พีซี แพด โทรศัพท์
//ความกว้าง >= 1200 >=992 >= 768 < 768
// ความละเอียดที่เหลือหลังจากลบแถบงาน // screen.availHeight/availWidth

• ความกว้างของหน้าจอที่ใช้ได้: screen.availWidth
• ความสูงของหน้าจอที่ใช้ได้: screen.availHeight
• ความสูงของหน้าจอ: screen.Height
• ความกว้างของหน้าจอ: screen.Width
• จำนวนหลักของสีหน้าจอ : colorDepth

element offset ชุดออฟเซ็ต

สามารถรับตำแหน่ง (ออฟเซ็ต) ขนาด ฯลฯ ขององค์ประกอบ ได้แบบไดนามิก

• รับ
• ระยะห่างขององค์ประกอบไปยังตำแหน่งขององค์ประกอบหลัก
• รับขนาดขององค์ประกอบนั้นเอง
• ค่าไม่มีหน่วย

แอตทริบิวต์ที่ใช้กันทั่วไปของชุดออฟเซ็ต:

• องค์ประกอบ offsetParent: ส่งคืนองค์ประกอบหลักที่มีตำแหน่งเป็นองค์ประกอบ หากองค์ประกอบหลักไม่อยู่ในตำแหน่ง ร่างกายจะถูกส่ง
• กลับ ขององค์ประกอบเหนือองค์ประกอบหลักที่อยู่ในตำแหน่ง
• element.offsetLeft*: ส่งกลับแถบสัมพัทธ์ขององค์ประกอบ มีออฟเซ็ตทางด้านซ้ายขององค์ประกอบหลักที่อยู่ในตำแหน่ง
• element.offsetWidth: ส่งกลับความกว้างของตัวเองรวมทั้งช่องว่างภายใน เส้นขอบ และเนื้อหา โดยไม่มีองค์ประกอบหน่วย
• offsetHeight: ส่งกลับความสูงของตัวเองรวมทั้งช่องว่างภายใน เส้นขอบ และเนื้อหา โดยไม่มี

ไคลเอ็นต์พื้นที่ภาพขององค์ประกอบหน่วย ซีรีส์

แอตทริบิวต์ทั่วไป

เช่น ขนาดเส้นขอบและขนาดองค์ประกอบขององค์ประกอบ

• element.clientTop: ขนาดของ เส้นขอบด้านบนขององค์ประกอบ
• element.clientLeft: ขนาดของเส้นขอบด้านซ้ายขององค์ประกอบ
• element.clientWidth*: ส่งคืนความกว้างของตัวเองรวมทั้งช่องว่างภายในและพื้นที่เนื้อหา ไม่รวม border โดยไม่มีองค์ประกอบหน่วย.
• clientHeight*: ส่งกลับความสูงของ รวมถึงช่องว่างภายในและพื้นที่เนื้อหา ไม่รวมเส้นขอบ โดยไม่มี

ชุดการเลื่อนองค์ประกอบ

รับ

ขนาดและระยะการเลื่อนขององค์ประกอบ

• แบบ
• ไดนามิก ระยะทางด้านซ้าย โดยไม่มีองค์ประกอบหน่วย
• srcollWidth: ส่งกลับความกว้างจริง โดยไม่มีเส้นขอบ โดยไม่มีองค์ประกอบหน่วย
• srcollHeight: ส่งกลับความสูงจริง ไม่มีเส้นขอบ และไม่มีแถบ

เลื่อนหน่วย เมื่อเลื่อน เหตุการณ์ onscroll จะถูกทริกเกอร์

เพื่อดูระยะการเลื่อนของแถบเลื่อน

window.pageXOffset/pageYOffset IE8 และด้านล่างเข้ากันไม่ได้กับ document.body/documentElement.scrollLeft/scrollTop

ให้

สองค่ามีค่าในเวลา เดียวกัน

 
สรุปวิธีการรับระยะการเลื่อนของแถบเลื่อน ส่งกลับ: x: ระยะการเลื่อนของแถบเลื่อนแนวนอน y: ระยะการเลื่อนของแถบเลื่อนแนวตั้ง */function getScrollOffet(){
    ถ้า (window.pageXOffset){
        return {//{} ของอ็อบเจ็กต์จะต้องอยู่หลังคีย์เวิร์ด มิฉะนั้นระบบจะเพิ่มค่านั้นโดยอัตโนมัติ จากนั้นค่าที่ส่งคืนจะไม่ได้กำหนดไว้
            x : window.pageXOffset,
            y : window.pageYOffset }
    }else{//เข้ากันได้กับ IE8 และต่ำกว่า return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop }
    }}

ดูขนาดของ viewport

window.innerWidth/innerHeight เข้ากันไม่ได้กับ IE8 และต่ำกว่า (หมายเหตุ: ความกว้างและความสูงที่นี่ไม่รวมความสูงของแถบเมนู แถบเครื่องมือ แถบเลื่อน ฯลฯ) document.documentElement.clientWidth/clientHeight ในโหมดมาตรฐาน เบราว์เซอร์ใด ๆ ก็ตามที่เข้ากันได้กับ document.body.clientWidth/clientHeight เป็น วิธีความเข้ากันได้ของการห่อหุ้มเบราว์เซอร์ที่เหมาะสำหรับสถานการณ์แปลก ๆ ส่งคืนขนาดวิวพอร์ตของเบราว์เซอร์ getViewportOffset()

/*Encapsulation ส่งคืนค่าส่งคืนขนาดวิวพอร์ตของเบราว์เซอร์ : :
    w: ความกว้างของวิวพอร์ต h: ความสูงของวิวพอร์ต*/ฟังก์ชัน getViewportOffset(){
    ถ้า(window.innerWidth){
        กลับ {
            w : window.innerWidth,
            ชั่วโมง : window.innerHeight }
    }else{ //เข้ากันได้กับ IE8 และเบราว์เซอร์ต่ำกว่า if(document.compatMode == 'BackCompat'){
            // ส่งคืน { ในโหมดเรนเดอร์แปลก ๆ
                w : document.body.clientWidth,
                ชั่วโมง : document.body.clientHeight }
        }อื่น{
            // โหมดมาตรฐานส่งคืน {
                w : document.documentElement.clientWidth,
                ชั่วโมง : document.documentElement.clientHeight }
        -
    }}console.log(document.compatMode); // BackCompat โหมดแปลก ๆ // CSS1Compat โหมดมาตรฐาน

เพื่อดูขนาดทางเรขาคณิตขององค์ประกอบ ES5 ความเข้าใจใหม่เกี่ยวกับ

domElement.getBoundingClientRect() มีความเข้ากันได้ดี แอตทริบิวต์ เช่น บน ขวา และล่าง ด้านซ้ายและด้านบนแสดงถึงพิกัด X และ Y ของมุมซ้ายบนขององค์ประกอบ คุณลักษณะ width ไม่ได้ถูกนำมาใช้ใน IE เวอร์ชันเก่า ผลลัพธ์ที่ส่งคืนไม่ใช่แบบเรียลไทม์ '

// รับตำแหน่งขององค์ประกอบในฟังก์ชันเอกสาร getElementPosition(target){
    //สนับสนุนเมธอด BoundingClientRect() ถ้า (0 && target.getBoundingClientRect){
        var pos = target.getBoundingClientRect();

        return { // เมื่อแถบเลื่อนเลื่อน ให้เพิ่มตำแหน่ง x ของแถบเลื่อน: pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft)
            y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
        -
    } อื่น {
        var pos = {
            ซ้าย: 0,
            ด้านบน : 0
        -
        var _elm = เป้าหมาย;
        ในขณะที่ (target.offsetParent) {
            if(_elm == target){//สะสมด้านซ้ายและด้านบนเป็นครั้งแรก
                pos.left += เป้าหมาย.offsetLeft;
                pos.top += เป้าหมาย.offsetTop;
            }อื่น{
                pos.left += target.offsetLeft + target.clientLeft;
                pos.top += target.offsetTop + target.clientTop;
            -
            // เป้าหมายมอบหมายใหม่ target = target.offsetParent;
        -
        กลับ { x : pos.left, y : pos.top}
    }}

แถบสถานะ

คุณสมบัติ

• defaultStatus เปลี่ยนสถานะการแสดงผลเริ่มต้นของแถบสถานะของเบราว์เซอร์
• เปลี่ยน

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

• IE
  • หน้าจอซ้ายประกาศพิกัด x ของมุมซ้ายบนของหน้าจอหน้าต่าง
  • ด้านบนประกาศพิกัด y ของมุมซ้ายบน ของหน้าต่าง
  • document.body.screenLeft
  • documentElement.screenLeft ประกาศจำนวนพิกเซลที่เอกสารปัจจุบันเลื่อนไปทางขวา
  • document.body.screenTop
  • document.documentElement.screenTop ประกาศจำนวนพิกเซลที่เอกสารปัจจุบันเลื่อนไปทางขวา
• ! IE
  • screenX ประกาศพิกัด x ของมุมซ้ายบนของหน้าจอ
  • หน้าต่าง Y ประกาศมุมซ้ายบนของหน้าต่าง พิกัด y pageXOffset ประกาศ
  • จำนวนพิกเซลที่เอกสารปัจจุบันได้เลื่อนไปยังหน้าขวา
  • YOffset ประกาศจำนวนพิกเซลที่ เอกสารปัจจุบันได้เลื่อนไปทางขวา
• FF
  • innerHeight ส่งกลับความสูงของพื้นที่แสดงเอกสารของ
  • หน้าต่าง innerWidth ส่งกลับความกว้างของพื้นที่แสดงเอกสารของหน้าต่าง
  • outerWidth ส่งกลับความกว้างด้านนอกของหน้าต่าง
  • outerHeight ส่งกลับความสูงภายนอกของ

• • หน้าต่าง

และคุณลักษณะอื่น ๆ

• สามารถรับรู้ถึงการสื่อสารระหว่างแบบฟอร์มข้ามภายใต้ชื่อโดเมนเดียวกัน แบบฟอร์มควรมีตัวเปิดของแบบฟอร์มอื่น
• ที่
• ส่งคืนจริงเมื่อปิดหน้าต่าง
• ปัจจุบัน
• ส่งกลับชื่อของหน้าต่างปัจจุบัน