HOME › học javascript - lập trình javascript cơ bản>>16. javascript và broswer

Đóng tab hoặc cửa sổ trong JavaScript (window.close)

27 tháng 6 ,2022

Hướng dẫn cách đóng cửa sổ trong JavaScript. Bạn sẽ biết cách sử dụng phương thức window.close để đóng cửa sổ trong JavaScript sau bài học này.

window.close trong JavaScript là gì

window.close trong JavaScript là một phương thức của window Object, có tác dụng đóng một tab hoặc một cửa sổ trên trình duyệt trong JavaScript.

Cú pháp đóng một tab hoặc cửa sổ bằng phương thức window.close như sau:

this_window.close()

Trong đó this_window là một tab hoặc cửa sổ được mở bởi phương thức window.open().

Ví dụ cụ thể:

let newwin = open('https://www.example.com/');
newwin.close();

Lưu ý là phương thức window.close chỉ có tác dụng đóng các tab hoặc cửa sổ được mở trước đó bằng phương thức window.open mà thôi. Trong trường hợp sử dụng phương thức này để đóng một tab hoặc cửa sổ mà không phải được mở bằng window.open (ví dụ như cửa sổ người dùng tự click) thì sẽ không có xử lý gì xảy ra, và ở màn hình console sẽ xuất ra cảnh báo như sau:

Chrome:
Scripts may close only the windows that were opened by them.

Firefox:
The script can only close the window opened by the script.

Xem thêm: Mở tab hoặc cửa sổ mới trong JavaScript (window.open)

Mã mẫu

Sau đây hãy cùng xem ví dụ cơ bản về cách đóng cửa sổ trong JavaScript bằng phương thức window.close.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Ví dụ đóng tab/window</p>

<input type="button" value="open" id="openbtn">
<input type="button" value="close" id="closebtn">

<script>
let newwin;

let openbutton = document.getElementById('openbtn');
openbutton.addEventListener('click', () => {
    newwin = open('https://laptrinhcanban.com/');
});

let closebutton = document.getElementById('closebtn');
closebutton.addEventListener('click', () => {
    newwin.close();
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút open, một tab mới với đường dẫn https://laptrinhcanban.com/' sẽ được hiện ra.

Sau đó, khi quay trở lại cửa sổ hiện tại và click vào nút close, tab mới mở bằng phương thức open trên sẽ được đóng lại như sau:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách đóng tab hoặc cửa sổ trong JavaScript bằng phương thức window.close rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.