Trong bài hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu về và cách thao tác với đối tượng window trong JavaScript. Show
Thao tác với Window trong JavaScript 1. Đối tượng window là gì?Đối tượng window đại diện cho một cửa sổ chứa cả DOM. Một window có thể là cửa main window, là một tập hợp khung hoặc khung riêng lẻ, hoặc thậm chí là một cửa sổ mới được tạo bằng JavaScript. Nếu bạn nhớ từ các chương trước, chúng ta đã sử dụng phương thức alert() để bật ra cửa sổ thông báo Đây chính là một phương thức của đối tượng window. Trong một vài bài hướng dẫn tự học JS tiếp theo, chúng ta sẽ thấy một số phương thức và thuộc tính mới của đối tượng window cho phép chúng ta thực hiện những việc như: + Nhắc người dùng nhập thông tin + Xác nhận hành động của người dùng + Mở cửa sổ mới + ... cho phép bạn thêm nhiều tương tác hơn vào các trang web của bạn. 2. Tính toán chiều rộng và chiều cao của windowĐối tượng window cung cấp thuộc tính innerWidth và innerHeight để tìm ra chiều rộng và chiều cao của khung nhìn cửa sổ trình duyệt (tính bằng pixel) bao gồm cả thanh cuộn ngang và dọc, nếu được hiển thị. Đây là một ví dụ hiển thị kích thước hiện tại của cửa sổ khi click vào nút:
Tuy nhiên, nếu bạn muốn tìm hiểu chiều rộng và chiều cao của cửa sổ ngoại trừ các thanh cuộn, bạn có thể sử dụng thuộc tính clientWidth và clientHeight của bất kỳ phần tử DOM nào (như div). Hãy xem ví dụ sau để hiểu cách nó hoạt động:
Lưu ý: Đối tượng document.documentElement đại diện cho phần tử gốc của tài liệu, là phần tử html, trong khi đối tượng document.body đại diện cho phần tử body. Cả hai đều được hỗ trợ trong tất cả các trình duyệt chính. Trong bài này chúng ta sẽ tìm hiểu đối tượng window trong Javascript, qua đó sẽ giúp bạn biết được danh sách các phương thức và thuộc tính của window object. Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Đối tượng 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 window nhé. 1. Window trong javascript là gì?Trong javascript, window là một đối tượng thuộc nhóm BOM - tức là một object có những phương thức và thuộc tính được dùng để xử lý trình duyệt. Bài viết này được đăng tại [free tuts .net] Công dụng của window chủ yếu là các thao tác với trình duyệt như: Tính chiều cao - di chuyển - thay đổi kích thước - mở ra một tab mới - lấy đường dẫn url của website. Vì vậy, nếu bạn đang xây dựng giao diện responsive thì sẽ cần sử dụng đến đối tượng này. 2. Window.innerHeight - lấy kích thước 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 Đố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 widthBrowser = 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 width = document.documentElement.clientWidth; // hoặc var width = 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 width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; Hai dấu
var width = 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à: " + width + "<br/>"); document.write("Trình duyệt có chiều cao là: " + height + "<br/>"); 3. Thao tác đối tượng window trong javascriptĐối tượng window.open() - mở một cửa sổ mớiCú pháp: Trong đó:
<html> <body> <script language="javascript"> var windowChild = null; function openWindow() { windowChild = window.open('https://freetuts.net', "windowChild", "width=500, height=500"); return false; } </script> <a href="#" onclick="return openWindow()">Open</a> </body> </html> </script> window.close() - đòng cửa sổSau khi mở cửa sổ thì để đóng cửa sổ đó chúng ta sử dụng lệnh <html> <body> <script language="javascript"> var windowChild = null; function openWindow() { windowChild = window.open('https://freetuts.net', "windowChild", "width=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> window.moveTo() - di chuyển cửa sổSau khi mở một cửa sổ nếu muốn di chuyển nó thì ta dùng lệnh
Ví dụ: <html> <body> <script language="javascript"> var windowChild = null; function openWindow() { windowChild = window.open('https://freetuts.net', "windowChild", "width=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> window.resizeTo() - thay đổi kích thước cửa sổLúc mở cửa sổ bạn sẽ thiết lập
<html> <body> <script language="javascript"> var windowChild = null; function openWindow() { windowChild = window.open('https://freetuts.net', "windowChild", "width=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> window.location.href - lấy url websiteNếu bạn muốn lấy đường dẫn hiện tại của trang web thì sử dụng lệnh sau. let url = window.location.href; 4. Lời kếtTrong các ví dụ ở phần 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 sẽ chuyên nghiệp và đẹp hơn. |