Phương pháp open trong đối tượng window

Chào các bạn

Trong bài viết này chúng ta cùng làm việc với phương pháp open trong đối tượng window

Open

Phương pháp open dùng để mở cửa sổ mới trong trình duyệt.

Để mở một cửa sổ chúng ta dùng như sau

1window.open("https://offjs.com")

Nhưng khi chúng ta làm như vậy thì trình duyệt sẻ chặn lại. Để nó có thể hoạt động được. Các bạn phải thêm nó vào đâu đó để người dùng xác định nhé.

Ví dụ như là nút button chẵng hạn

1let button = document.createElement('button'); // Tạo mới thẻ button
2
3button.innerHTML = "Click Me Open New Tab" // Nội dung văn bản button
4
5button.onclick = function () { // Thêm chức năng xử lý cho button
6    window.open("https://offjs.com"); // Mở trang web trong cửa sổ mới
7}
8
9document.body.append(button); // Thêm button vào cuối body

Ở ví dụ trên mình tạo và làm các thứ cho button bằng javascript. Đơn nhiên là còn nhiều cách khác nữa. Nhưng mà mình lười viết.

Cú pháp của chức năng open

1window.open(url, target, features)

1. url
   • Chuỗi URL đường dẫn để mở cửa sổ
2. target
   • Tên chúng ta đặt cho cửa sổ
3. features
   • Chuỗi cấu hình tùy chọn cho cửa sổ
     • left Vị trí bên trái cửa sổ
     • Top Vị trí trên cùng cửa sổ
     • width Chiều rộng cửa sổ
     • height Chiều cao sửa sổ
     • menubar
       • yes Có menubar trên cửa sổ
       • no Không có menubar trên cửa sổ
     • toolbar
       • yes Có hiển thị thanh điều hướng
       • no Không có hiển thị thanh điều hướng
     • location
       • yes Có hiển thị URL trong cửa sổ mới
       • no Không hiển thị URL trong cửa sổ mới
     • status
       • yes Có hiển thị thanh trạng thái
       • no Không hiển thị thanh trạng thái
     • resizable
       • yes Cho phép resizable cửa sổ
       • no Không cho phép
     • scrollbars
       • yes Cho phép vô hiệu hóa thanh cuộn cửa sổ
       • no Không cho phép vô hiệu hóa thanh cuộn
     • Ngoài ra còn có các tùy chọn khác. Các bạn xem thêm về nó tại đây windowFeatures

Ví dụ:

1let button = document.createElement('button');
2button.innerHTML = "Click Me Open New Windown"
3
4button.onclick = function () {
5    window.open('https://offjs.com', "newWindown", "left=100,top=100,height=100,width=100,menubar=no,location=no,status=no,resizable=no,scrollbar=no,popup=no");
6}
7
8document.body.append(button);

Lưu ý: Nếu chúng ta chạy ví dụ trên mà tham số chạy không đúng như dư định thì do trình duyệt không áp dụng nhé.

Truy cập vào cửa sổ mới

Cuộc gọi window.open(...) sẻ trả về một tham chiếu đến cửa sổ mới có. Các bạn có thể truy cập nó bằng cách

1let button = document.createElement('button');
2button.innerHTML = "Click Me Open New Windown"
3
4button.onclick = function (e) {
5    let newWindown = window.open('https://offjs.com', "newWindown", "popup");
6
7    newWindown.onload = function () {
8        newWindown.document.body.style.backgroundColor = 'red'
9    }
10}
11
12document.body.append(button);

Lưu Ý: Phải có cùng nguồn gốc thì mới thay đổi được backgroundColor như ví dụ trên nhé các bạn.

Đóng cửa sổ mới

Để đóng cửa sổ các bạn dùng phương pháp close

1let button = document.createElement('button');
2button.innerHTML = "Click Me Open New Windown"
3
4button.onclick = function (e) {
5    let newWindown = window.open('https://offjs.com', "newWindown", "popup");
6
7    setTimeout(() => {
8        newWindown.close();
9        alert(newWindown.closed);
10    }, 3000);
11}
12
13document.body.append(button);

Ở ví dụ trên mình đóng cửa sổ mới sau 3 giây. Nếu cửa sổ được đóng thì tài sản closed trả về true

Và đơn nhiên còn nhiều thứ khác nữa. Các bạn muốn tìm hiểu về chi tiết thì xem thêm về nó tại đây open

Tổng kết

Trong bài viết này mình đã nói về phương pháp open trong đối tượng window.

Đơn nhiên là còn rất rất là nhiều phương pháp và tài sản khác nữa. Cần rất rất là nhiều thời gian để mà tìm hiểu. Có thể nói đến hàng năm. Chứ không thể nói từng ngày được.

OK.