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)
- url
- Chuỗi URL đường dẫn để mở cửa sổ
- target
- Tên chúng ta đặt cho cửa sổ
- 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
- Chuỗi cấu hình tùy chọn cho cửa sổ
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.
- window
- string
- object
- regular
Các bài viết liên quan
Tài sản phương pháp trong lớp Number
Cùng nhau tìm hiểu các tài sản và phương pháp trong lớp NumberJavascriptCác phương pháp tỉnh Object.keys values entries
Cùng nhau tìm hiểu về các phương pháp tỉnh Object.keys() Object.values() Object.entries()JavascriptPhá vỡ đối tượng thành các biến trong javascript
Destructuring là một kỹ thuật rất phổ biến trong js. Các bạn chưa biết thì nên tìm hiểu nó thật kỹ.Javascript