JavaScript Window - Μοντέλο Οντοτήτων Πλοηγού

Μοντέλο αντικειμένων περιηγητή (Browser Object Model (BOM) επιτρέπει στο JavaScript να επικοινωνεί με τον περιηγητή.

Μοντέλο αντικειμένων περιηγητή (Browser Object Model (BOM))

Δεν υπάρχει επίσημος πρότυπος για το μοντέλο αντικειμένων περιηγητή (BOM).

Τα σύγχρονα περιηγητές έχουν ( σχεδόν) υλοποιήσει τα ίδια μέθοδους και ιδιότητες για την αλληλεπίδραση JavaScript, οπότε συχνά αναφέρονται ως μεθόδους και ιδιότητες του BOM.

Άντικυριο Window

Όλοι οι περιηγητές υποστηρίζουν window Άντικυριο

Όλα τα καθολικά αντικείμενα JavaScript, συνάρτησεις και μεταβλητές γίνονται αυτόματα μέλη του αντικειμένου window.

Οι καθολικές μεταβλητές είναι ιδιότητες του αντικειμένου window.

Οι καθολικές συνάρτησεις είναι μεθόδους του αντικειμένου window.

Και ακόμα (το HTML DOM) το αντικείμενο document είναι ιδιότητα του αντικειμένου window:

window.document.getElementById("header");

Εξίσου με:

document.getElementById("header");

Μέγεθος παραθύρου

Οι δύο ιδιότητες μπορούν να χρησιμοποιηθούν για να καθορίσουν το μέγεθος του παραθύρου περιήγησης.

Αυτές οι δύο ιδιότητες επιστρέφουν το μέγεθος σε pixel:

  • window.innerHeight - η εσωτερική ύψος του παραθύρου περιήγησης (μετρημένα σε pixel)
  • window.innerWidth - η εσωτερική πλάτος του παραθύρου περιήγησης (μετρημένα σε pixel)

Το παράθυρο περιήγησης (το οπτικό παράθυρο περιήγησης) δεν περιλαμβάνει την εργαλειοθήκη και τις γραμμές κύλισης.

για Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

ή

  • document.body.clientHeight
  • document.body.clientWidth

Μια实用的 JavaScript λύση (για όλους τους περιηγητές):

Παράδειγμα

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Προσπάθησε να το δοκιμάσεις

Το παράδειγμα αυτό δείχνει το ύψος και τη πλάτος του παραθύρου του περιηγητή (χωρίς τη γραμμή εργαλείων και τη γραμμή κύλισης):

Άλλες μεθόδους παραθύρου

Μερικές άλλες μεθόδους:

  • window.open() - ανοίγματα νέου παραθύρου
  • window.close() - κλείσιμο του τρέχοντος παραθύρου
  • window.moveTo() - μετακίνηση του τρέχοντος παραθύρου
  • window.resizeTo() - επαναπροσαρμογή του τρέχοντος παραθύρου