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.
Nội dung chính
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é.
"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
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
"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".
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.
var
width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var
height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
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à portnumber
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à portnumber
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.
[…] học trước, chúng ta đã tìm hiểu về hai thành phần đầu tiên của BOM là window và location. Trong bài này, chúng ta sẽ tìm hiểu về history và cookie trong […]