Chủ đề nổi bật
03/08/2018, 09:59

BOM - Window trong Javascript

Đây là bài đầu tiên trong loạt bài giới thiệu về DOM trong Javascript và trong bài này chúng ta sẽ tìm hiểu đến đối tượng Window. Đối tượng Window ...

Đây là bài đầu tiên trong loạt bài giới thiệu về DOM trong Javascript và trong bài này chúng ta sẽ tìm hiểu đến đối tượng Window. Đối tượng Window được hỗ trợ hầu hết các trình duyệt và mỗi tab trình duyệt sẽ có một đối tượng Window riêng và không liên quan tới nhau.

Đối tượng Window có rất nhiều thuộc tính và phương thức riêng. Ví dụ đối tượng document là một thuộc tính của window (window.document), vì vậy nên ta có thể ví Window là một đối tượng toàn cục và ở đâu trong website cũng có thể sử dụng được.

Bây giờ chúng ta sẽ tìm hiểu các thuộc tính và phương thức của đối tượng BOM Window nhé.

1. Xác định kích thước của trình duyệt

Để lấy kích thước chiều cao và chiều rộng của trình duyệt thì chúng ta sử dụng đối tượng window, tuy nhiên với mỗi trình duyệt thì có những cách lấy khác nhau.

Đối với Internet Explorer, Chrome, Firefox, Opera, và Safari thì cú pháp như sau:

// lấy chiều cao
var heightBrowser = window.innerHeight;

// lấy chiều rộng
var awidthBrowser = window.innerWidth;

Đối với Internet Explorer các version 5,6,7,8 thì cú pháp như sau:

// Lấy chiều cao
var height = document.documentElement.clientHeight;
// hoặc
var height = document.body.clientHeight;

// Lấy chiều rộng
var awidth = document.documentElement.clientWidth;
// hoặc
var awidth = document.body.clientWidth;

Việc tương thích với các trình duyệt quá rắc rối phải không nào? Vậy có cách nào giải quyết vấn đề này không? Câu trả lời là có bằng cách sử dụng một mẹo nhỏ như sau:

var awidth = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

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

Hai dấu || có ý nghĩa rằng nếu vế trái không thực hiện được thì nó sẽ lấy vế phải và cứ như vậy cho tới khi lấy được thì dừng.

Ví dụ: XEM DEMO

var awidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

document.write("Trình duyệt có chiều rộng là: " + awidth + "<br/>");
document.write("Trình duyệt có chiều cao là: " + height + "<br/>");

2. Thao tác với một cửa sổ window

Đối tượng window cung cấp một số phương thức giúp thao tác với trình duyệt dễ dàng hơn.

Mở một cưa sổ với lệnh window.open()

Cú pháp: window.open(url, name, options)

Trong đó:

  • url : là đường dẫn website bạn muốn mở
  • name: là tên bạn đặt cho cửa sổ này
  • options: là một chuỗi các thông số được cách nhau bởi dấu phẩy, sau đây là các thông số thông dụng:
    • height=pixels : chiều cao của cửa sổ
    • awidth=pixels: chiều rộng của cửa sổ
    • top=pixels: vị trí hiển thị cửa sổ so với lề trên
    • left=pixels: vị trí hiển thị cửa sổ so với lề trái
    • menubar=yes|no|1|0: có hiển thị thanh menu hay không?
    • resizable=yes|no|1|0: có hiển thị biểu tượng resize cửa sổ hay không?
    • scrollbars=yes|no|1|0: có hiển thị thanh cuộn hay không?
    • status=yes|no|1|0: có hiển thị thanh trạng thái hay không?
    • titlebar=yes|no|1|0: có hiển thị titlebar hay không?
    • toolbar=yes|no|1|0: có hiển thị toolbar hay không?
    • fullscreen=yes|no|1|0: có hiển thị biểu tượng fullscreen hay không?

Ví dụ: XEM DEMO

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          windowChild = window.open('https://code24h.com', "windowChild", "awidth=500, height=500");
        	return false;
        }
        
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
    </body>
</html>
</script>

Đóng một cửa số với lệnh window.close()

Sau khi mở cửa sổ thì để đóng cửa sổ đó chúng ta sử dụng lệnh windowObj.close(), trong đó windowObj là cửa sổ mà ta sử dụng lệnh window.open() tạo ra.

Ví dụ: XEM DEMO

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          	windowChild = window.open('https://code24h.com', "windowChild", "awidth=500, height=500");
        	return false;
        }
        
        function closeWindow()
        {
          	windowChild.close()
        	return false;
        }
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
      <a href="#" onclick="return closeWindow()">Close</a>
    </body>
</html>

Di chuyển cửa sổ với lệnh window.moveTo()

Sau khi mở một cửa sổ nếu muốn di chuyển nó thì ta dùng lệnh windowObj.moveTo(top, left), trong đó:

  • top: là số pixels so với lề trên
  • left: là số pixels so với lề trái

Ví dụ:

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          	windowChild = window.open('https://code24h.com', "windowChild", "awidth=500, height=500");
        	return false;
        }
        
        function moveWindow()
        {
          	windowChild.moveTo(500, 100);
          	windowChild.focus();
        	return false;
        }
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
      <a href="#" onclick="return moveWindow()">Move</a>
    </body>
</html>

Resize cửa sổ với lệnh window.resizeTo()

Lúc mở cửa sổ bạn sẽ thiết lập height và with cho window, tuy nhiên nếu sau khi mở bạn muốn thay đổi thì sử dụng hàm windowObj.resizeTo(awidth, height), trong đó:

  • awidth: chiều rộng của cửa sổ
  • height: chiều cao của cửa sổ

Ví dụ:

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          	windowChild = window.open('https://code24h.com', "windowChild", "awidth=500, height=500");
        	return false;
        }
        
        function resizeWindow()
        {
          	windowChild.resizeTo(1000, 1000);
          	windowChild.focus();
        	return false;
        }
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
      <a href="#" onclick="return resizeWindow()">Resize</a>
    </body>
</html>

3. Lời kết

Trong các ví dụ ở phần moveTo() và resizeTo() mình không có demo bởi vì trình duyệt đã chặn hai phương thức này nên bạn hãy copy code vào file của bạn rồi chạy nhé.

Vẫn còn một số phương thức nữa nhưng bài này mình chỉ đề cập tới bấy nhiêu là quá đủ cho bạn học rồi, nếu cần thiết thì bạn có thể sử dụng google để tra cứu thêm. Và việc sử dụng đối tượng window để mở các cửa sổ không còn thông dụng nữa mà thay vào đó người ta sử dụng một kỹ thuật khác đó là xây dựng Popup nhìn chuyên nghiệp và đẹp hơn.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>. Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử ...

Tài liệu tham khảo & Framework cho Javascript

Dưới đây chúng tôi liệt kê tất cả các nguồn tài liệu hữu ích và Framework cho JavaScript. Bạn nên sử dụng chúng để thực hành cũng như hiểu sâu hơn những chủ đề đã được đề cập trong loạt bài này. Các JavaScript Framework hàng đầu: Follow fanpage của ...

Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error). Syntax Error Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch ...

Đa phương tiện (Multimedia) trong JavaScript

Đối tượng navigator trong JavaScript bao gồm một đối tượng con gọi là plugins . Đối tượng này là một mảng, với một cổng vào (entry) cho mỗi plug-in được cài đặt trên trình duyệt. Đối tượng navigator.plugins chỉ được hỗ trợ bởi Netscape, Firefox và Mozilla. Ví dụ Dưới đây là ví dụ minh ...

Các hàm có sẵn trong JavaScript

Đối tượng Number chỉ chứa các phương thức mặc định mà là một phần của sự định nghĩa của mỗi đối tượng. Phương thức Miêu tả constructor() Trả về hàm mà tạo sự instance của đối tượng này. Theo mặc định, nó là đối tượng Number. toExponential() Làm một số hiển thị ở dạng số mũ, ...

Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug . Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công ...

Document Object Model (DOM) trong JavaScript

Mỗi trang web cư ngụ bên trong một cửa sổ trình duyệt mà có thể xem như là một đối tượng. Một đối tượng Document biểu diễn tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính đa dạng như các đối tượng khác mà cho phép truy cập và chỉnh sửa nội dung tài liệu. ...

Đối tượng Boolean trong JavaScript

Miêu tả Đối tượng Boolean biểu diễn hai giá trị, hoặc "true" hoặc "false". Nếu tham số value bị bỏ qua hoặc là 0, -0, null, false, NaN , undefined, hoặc một chuỗi trống (""), đối tượng có một giá trị khởi tạo là false. Cú pháp Sử dụng cú pháp sau để tạo một đối tượng Boolean . ...

Đối tượng String trong JavaScript

Đối tượng String giúp bạn làm việc với một dãy các ký tự; nó giúp xử lý các kiểu dữ liệu chuỗi gốc trong JavaScript với một số phương thức giúp đỡ. Khi JavaScript tự động biến đổi giữa chuỗi gốc và các đối tượng String, bạn có thể gọi bất kỳ phương thức giúp đỡ nào của đối tượng String ...

Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì? Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang . Khái niệm này khác với: JavaScript – Refresh trang. Có nhiều lý do khác nhau để tại sao bạn muốn ...