Hướng dẫn dùng wibdow JavaScript

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- BOM Là gì?

Mô hình đối tượng trình duyệt (Brower Object Model - BOM) bao gồm các thuộc tính (property), các phương thức (method) được cung cấp bởi trình duyệt để JavaScript có thể tương tác với trình duyệt.

Có rất nhiều các trình duyệt đang cùng tồn tại như Firefox, Chrome, IE, Opera,.. Mỗi trình duyệt lại có một tiêu chuẩn riêng, vì vậy BOM hơi khác nhau với các trình duyệt khác nhau. Không có một tiêu chuẩn chính thức nào cho BOM. Thật may mắn các trình duyệt mới dang dần hỗ trợ các tiêu chuẩn được sử dụng rộng rãi.

Hãy xem cách lấy thông tin chiều rộng và chiều cao của cửa sổ trình duyệt để thấy được sự khác biệt giữa các trình duyệt:

window.innerWidth được hỗ trợ bởi các trình duyệt Firefox, Chrome, Opera, IE 9+ nhưng không được hỗ trợ bởi trình duyệt IE 8 (Hoặc cũ hơn), và bạn phải sử dụng document.documentElement.clientWidth hoặc document.body.clientWidth.

2- Đối tượng window

Đối tượng window là một đối tượng quan trọng nhất trong BOM, nó đại diện cho cửa sổ trình duyệt và được hỗ trợ bởi tất cả các trình duyệt. Tất cả các đối tượng Javascript toàn cục (global), các hàm toàn cục, các biến toàn cục đều là thành viên của đối tượng window.

Ví dụ, document là một đối tượng toàn cục, nó là một thuộc tính (property) của đối tượng window, bạn có thể truy cập vào nó thông qua cú pháp window.document hoặc đơn giản là document.

var element = window.document.getElementById("someId");

// Same as:

var element = document.getElementById("someId");

Hàm alert("something") là một hàm toàn cục (global), nó là một thành viên của đối tượng window. Vì vậy bạn có thể sử dụng nó theo các cách dưới đây:

alert("Hello! I am an alert box!!");

// Same as:

window.alert("Hello! I am an alert box!!");

Nếu bạn tạo ra một biến toàn cục, hoặc một hàm toàn cục thì chúng các thành viên của đối tượng window. Xem ví dụ:

global-func-variable-example.html

   
      
       
      
   
   
      
Global Variable, Global Function
      Call alert(COPY_RIGHT)
      Call alert(window.COPY_RIGHT)
      

 
      Call sayHello()
      Call window.sayHello()
   

 

3- Vị trí, kích thước,..

Các thuộc tính (property) để xác định kích thước, vị trí ,.. của cửa sổ trình duyệt:

Property	Read Only	Mô tả
window.innerHeight	Y	Lấy chiều cao của vùng nội dung của cửa sổ trình duyệt. Hoặc, nó chính là chiều cao của thanh cuộn thẳng đứng (Nếu thanh cuộn đứng hiển thị).
window.innerWidth	Y	Lấy chiều rộng của vùng nội dung của cửa sổ trình duyệt. Hoặc, nó chính là chiều rộng của thanh cuộn nằm ngang (Nếu thanh cuộn nằm ngang hiển thị).
window.outerHeight	Y	Lấy chiều cao bên ngoài của cửa sổ trình duyệt.
window.outerWidth	Y	Lấy chiều rộng bên ngoài của cửa sổ trình duyệt.
window.screenX window.screenLeft	Y	Cả hai thuộc tính (property) này trả về khoảng cách theo phương ngang từ cạnh trái của trình duyệt tới cạnh trái của màn hình.
window.screenY window.screenTop	Y	Cả hai thuộc tính (property) này trả về khoảng cách theo phương thẳng đứng từ cạnh trên của trình duyệt tới cạnh trên của màn hình.
window.scrollX window.pageXOffset	Y	Trả về số pixel mà document đã được cuộn theo phương ngang.
window.scrollY window.pageYOffset	Y	Trả về số pixel mà document đã được cuộn theo phương thẳng đứng.

Ví dụ:

window-example.html

   
      
       
   
   
      
Window example
      Show Infos
        
       
   

 

Các phương thức giúp thay đổi kích thước, vị trí,.. của cửa sổ trình duyệt:

4- window.status

Thuộc tính (property) status của đối tượng window giúp bạn thiết lập một nội dung văn bản hiển thị trên thanh trạng thái (Phía dưới cùng của trình duyệt). Tuy nhiên vì lý do bảo mật hầu hết các trình duyệt đều vô hiệu hóa tính năng này đối với JavaScript. Tuy nhiên nếu người dùng muốn họ có thể bật (enable) tính năng này cho JavaScript bằng cách vào "Tùy Chọn" của trình duyệt.

Người dùng trước khi nhấn vào một liên kết họ thường di chuyển chuột trên bề mặt của liên kết để xem trước địa chỉ của liên kết đó đang hiển thị ở thanh trạng thái (status bar), và chỉ nhấn vào liên kết này khi họ cảm thấy an toàn. Một số website có thể lợi dụng window.status để hiển thị một nội dung giả mạo.

5- Window, Frame

Một trang có thể chứa các Frame, và một Frame có thể chứa các Frame khác, chúng tạo thành một hệ thống phân cấp các Frame.

Property	Read Only	Description
window.name		Lấy hoặc sét đặt tên cho cửa sổ.
window.frameElement	Y	Trả về phần tử (element) mà cửa sổ này đang được nhúng (embedded) vào, hoặc null nếu cửa sổ này không được nhúng.
window.frames	Y	Trả về một mảng các frame bên trong cửa sổ hiện tại.
window.length	Y	Trả về số lượng các frame bên trong cửa sổ hiện tại. Xem thêm window.frames.
window.parent	Y	Trả về tham chiếu tới cửa sổ cha của cửa sổ (hoặc frame) hiện thời.
window.self	Y	Trả về một đối tượng tham chiếu tới chính đối tượng window.
window.opener	Y	Trả về một tham chiếu tới cửa sổ đã mở ra cửa sổ hiện tại.
window[0], window[1], etc.	Y	Trả về một tham chiếu tới đối tượng cửa sổ trong frames. Xem thêm window.frames.
window.top	Y	Trả về một tham chiếu tới cửa sổ trên cùng (topmost) trong hệ thống phân cấp các cửa sổ.

window.frameElement

Ví dụ với window.frameElement:

frameElement-example.html

   
      
      

      
   
   

      
Main Frame
      Reset
      
window.frameElement example
      
Note: You need to test this example on a http server.