JavaScript - BOM Window trong Javascript

27/03/2019, 9:29 AM | 27/03/2019, 9:29 AM | 762 | 027

1. BOM là gì
      BOM là chữ viết tắt của Browser Object Model, là các đối tượng liên quan đến trình duyệt. Không có một chuẩn chung nào cho BOM vì mỗi trình duyệt sẽ có những đối tượng khác nhau. Trong loạt bài về BOM ta sẽ cùng tìm hiểu một số loại BOM sau :
      - window
      - screen
      - location
      - history
      - navigator
      - popup alert
      - timing
      - cookies

2. Đối tượng Window
       Đối tượng window được hỗ trợ bởi tất cả các trình duyệt hiện nay, nó đại diện cho một cửa sổ trình duyệt.
Các biến toàn cục, các hàm ( function ) toàn cục đều là các thuộc tính của đối tượng window. Ngay cả document thuộc HTML DOM mà ta đã học các bài trước cũng là thuộc tính của đối tượng window. Viết như sau :

window.document.getElementById("id");

cho kết quả tương tự như cách viết tắt ở các bài trước :

document.getElementById("id");

Bây giờ ta sẽ tìm hiểu một số thuộc tính và phương thức của đối tượng window :
Lấy kích thước của trình duyệt
Hai thuộc tính xác định kích thước trình duyệt đó là :
- window.innerHeight : Tính chiều cao trình duyệt tính bằng pixel
- window.innerWidth : Tính chiều rộng trình duyệt tính bằng pixel

Đối với trình duyệt cũ Internet Explorer 8, 7, 6, 5 thì dùng cú pháp sau :

document.documentElement.clientHeight;
document.documentElement.clientWidth;
// hoặc
document.body.clientHeight;
document.body.clientWidth;

Chú ý : kích thước không bao gồm các thanh cuộn (scroll) và thanh toolbars.
Vậy để lấy được width và height của tất cả các trình duyệt thì có một cách sau :

var width = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
 
var height = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;

Mở một cửa sổ mới window.open()
Cú pháp như sau :

window.open(url, name, options)

Trong đó :
url : là địa chỉ bạn muốn mở
name : là tên cửa sổ
options : là các thông số cho cửa số
      - width=pixel : chiều rộng cửa sổ
      - height=pixel : chiều cao cửa sổ
      - top=pixel : vị trí của cửa sổ với lề trên
      - left=pixel : vị trí của cửa sổ với lề trái
      - scrollbars=yes | no hoặc 1 | 0 : Có hiển thị thanh cuộn không ?
Ví dụ :

Xem DEMO

<html>
    <head>
        
        <script type="text/javascript">
            function NewWindow() {
                window.open('http://vnfree.net', 'vnfree', 'width=500,height=300,top=100,left=400,scrollbars=yes');
                return false;
            }
            </script>
    </head>
    <body>
            <button type="button" onclick="NewWindow()">Mở cửa sổ</button>            
    </body>
</html>

Đóng một cửa sổ window.close()
Cú pháp :

window_new.close();

Trong đó : window_new là đối tượng window ta cần đóng
Ví dụ :

Xem DEMO

<html>
    <head>
        
        <script type="text/javascript">
            var window_new = null;

            function NewWindow() {
                window_new = window.open('http://vnfree.net', 'vnfree', 'width=500,height=300,top=100,left=400,scrollbars=yes');
                return false;
            }
          
            function closeWindow(){
                window_new.close();
                return false;
            }
            </script>
    </head>
    <body>
            <button type="button" onclick="NewWindow()">Mở cửa sổ</button>  
            <button type="button" onclick="closeWindow()">Đóng cửa sổ</button>
    </body>
</html>

Di chuyển cửa số với window.moveTo()
Nếu muốn di chuyển cửa sổ tới vị trí nào đó ta sử dụng cú pháp :

window_new.moveTo(left,top)

Trong đó :
      - window_new là đối tượng window ta muốn di chuyển
      - top : là khoảng cách với lề trên
      - left : là khoảng cách với lề trái
Ví dụ :

Xem DEMO

<html>
    <head>
        
        <script type="text/javascript">
            var window_new = null;
            function NewWindow() {
                window_new = window.open('', '', 'width=500,height=300,top=400,left=100,scrollbars=yes');
                return false;
            }
          
            function moveWindow(){
                window_new.moveTo(500,0);
                window_new.focus();
            }
            </script>
    </head>
    <body>
            <button type="button" onclick="NewWindow()">Mở cửa sổ</button>  
            <button type="button" onclick="moveWindow()">Di chuyển ra vị trí mới</button>
    </body>
</html>

Thay đổi kích thước cửa sổ với window.resizeTo()
Nếu sau khi mở của sổ bạn muốn thay đổi kích thước thì sử dụng cú pháp sau :

window_new.resizeTo(width,height)

Trong đó :
      - window_new là đối tượng window ta muốn thay đổi kích thước
      - width: là chiều rộng
      - height: là chiều cao
Ví dụ :

Xem DEMO

<html>
    <head>
        
        <script type="text/javascript">
            var window_new = null;
            function NewWindow() {
                window_new = window.open('', '', 'width=500,height=300,top=100,left=300,scrollbars=yes');
                return false;
            }
          
            function resizeWindow(){
                // truyền vào chiều rộng width và chiều cao height
                window_new.resizeTo(700,500);
                window_new.focus();
            }
            </script>
    </head>
    <body>
            <button type="button" onclick="NewWindow()">Mở cửa sổ</button>  
            <button type="button" onclick="resizeWindow()">Thay đổi kích thước</button>
    </body>
</html>

Vậy là ta đã tìm hiểu qua về BOM và đới tượng window, bài sau ta sẽ tìm hiểu thêm một số đối tượng thường dùng khác. Have a nice day :)