Bài 8: Window và Location trong JavaScript

Trong bài học này, chúng ta sẽ tìm hiểu về các đối tượng liên quan đến trình duyệt trong Javascript – hay còn gọi là BOM. Hai đối tượng đầu tiên chúng ta tìm hiểu là window và location trong JavaScript.

Các đối tượng liên quan đến trình duyệt trong Javascript

BOM là chữ viết tắt của Browser Object Model, hay còn gọi là các đối tượng liên quan đến trình duyệt browser. Mỗi browser sẽ có những đối tượng khác nhau nên nó không có một chuẩn chung nào cả, tuy nhiên để có tính thống nhất giữa các trình duyệt thì người ta quy ước ra các loại BOM sau: window, screen, location, history, navigator, popup, timing, cookies

Chúng ta sẽ tìm hiểu 4 loại thường dùng nhất là window, location, history và cookie nhé.

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Window – cửa sổ trình duyệt

Thuộc tính cơ bản

Các thuộc tính thường dùng nhất của window là innerHeight và innerWidth, lấy chiều cao và chiều rộng của cửa sổ trình duyệt.

Tuy nhiên, một số trình duyệt không hỗ trợ 2 thuộc tính này mà sẽ là clientWidth và clientHeight.

Chạy thử đạon script sau

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

var a = window.innerHeight
var b = window.innerWidth
console.log(a)

Để đồng bộ giữa các trình duyệt, người ta thường dùng đạon mã sau để lấy chiều rộng và chiều cao.

Thao tác cơ bản với window

+ Mở một cửa sổ mới bằng câu lệnh open(url, name, các tùy chọn)

Một số các tùy chọn

height=pixels : chiều cao của cửa sổ
width=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?

+ Đóng cửa sổ bằng câu lệnh đối tượng . close()

Bạn thử ví dụ sau nhé

<button onclick="openWindow()">Open</button><br><br>
<button onclick="closeWindow()">Close</button><br><br>
<script type="text/javascript">
var goc_lam_web
function openWindow() {
goc_lam_web = window.open("https://goclamweb.com/","goc_lam_web")
}
function closeWindow(){
goc_lam_web.close()
}
</script>

Ngoài ra còn có lệnh resize() để thay đổi chiều rộng chiều cao, và moveTo() để di chuyển nhưng rất ít dùng tới.

Location – điều hướng và xử lý url

Các thuộc tính cần thiết của location

• hash: thiết lập hoặc lấy phần sau dấu # của URL
• host: thiết lập hoặc lấy hostname và port number của URL
• hostname: thiết lập hoặc lấy hostname
• href: thiết lập hoặc lấy URL
• origin: trả về protocal, hostname và port number của URL
• pathname: thiết lập hoặc lấy path name của URL
• port: thiết lập hoặc lấy port của URL
• search: lấy phần query string của URL

Các bạn truy xuất bằng cú pháp: window.location.search. 

Thao tác với location

+ Load lại trang: dùng phương thức reload(). Xem ví dụ sau

<button onclick="window.location.reload()">reload</button>

+ Load trang mới: dùng phương thức assign(url). Xem ví dụ sau:

<button onclick="window.location.assign("https://goclamweb.com/")">Go</button>

+ Ghi đè trang hiện tại, có hai phương thức

href(url): load trang url và ghi lại vào lịch sữ duyệt web của bạn

replace(url): load trang mới và không ghi vào lịch sử

<button onclick="window.location.replace("https://goclamweb.com/")>Replace</button>
<button onclick="window.location.href("https://goclamweb.com/")>Href</button>

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ