Các “window.open()” Phương pháp JavaScript cho phép các nhà phát triển liên kết đến một cửa sổ khác bên trong trang web của họ. Cửa sổ này được gọi khi người dùng thực hiện một hành động cụ thể.
Nói tóm lại, chức năng chính của “window.open()” Phương pháp là mở một cửa sổ mới trên trang web chính mà không làm ảnh hưởng đến giao diện trang web chính. Trong một số trường hợp, cửa sổ mới được mở thành công nhưng thanh cuộn hoàn toàn không xuất hiện, điều này gây ấn tượng xấu cho người dùng.
Hướng dẫn nhanh này mô tả chi tiết quy trình tạo thanh cuộn dọc bằng phương thức window.open() trong JavaScript.
Làm cách nào để tạo thanh cuộn dọc với “window.open()” trong JavaScript?
Các “window.open()” theo mặc định, phương pháp này sẽ thêm thanh cuộn dọc tùy thuộc vào độ dài của nội dung trang web mới và kích thước của cửa sổ đã mở. Nếu nội dung của trang web lớn hơn kích thước cửa sổ thì thanh cuộn sẽ được thêm theo mặc định mà không áp dụng bất kỳ thuộc tính CSS nào. Tuy nhiên, nếu nhà phát triển muốn thêm thanh cuộn tùy chỉnh thì bạn có thể làm theo các phương pháp được giải thích trong các ví dụ bên dưới.
Cú pháp
Cú pháp cho “window.open()” phương pháp được nêu dưới đây:
cửa sổ. mở ( con đường , điểm đến , thắng lợi )Đây, 'con đường' là đường dẫn của trang web sẽ được mở trong một cửa sổ mới. Các 'điểm đến' là vị trí của cửa sổ mới xuất hiện, nó có thể được đặt thành 'trống' , 'cha mẹ' , 'bản thân' hoặc 'đứng đầu'. Tham số thứ ba là “winFeat” hoặc các tính năng của cửa sổ, nó cung cấp nhiều giá trị khác nhau có thể được đặt theo nhu cầu tùy chỉnh cửa sổ.
Chúng ta hãy xem qua một số ví dụ để tạo thanh cuộn dọc trong cửa sổ mới mở bằng cách sử dụng “window.open()” phương pháp.
Ví dụ: Sử dụng tính năng cửa sổ “scrollbars” với phương thức “window.open()”
Trong trường hợp này, “window.open()” phương pháp được sử dụng dọc theo “thanh cuộn” Tính năng của Cửa sổ để đặt thanh cuộn dọc cho cửa sổ mới mở, như minh họa bên dưới:
< cái đầu >< loại tập lệnh = 'văn bản/javascript' >
chức năng bộCuộn ( ) {
đã từng là mớiChiến thắng = cửa sổ. mở ( 'https://linuxhint.com' , 'đứng đầu' , 'chiều rộng=500, chiều cao=500, thanh cuộn=có' ) ;
}
kịch bản >
cái đầu >
< thân hình >
< P > Nhấn nút bên dưới để mở Blog Linuxhint ở bên trong - cửa sổ màn hình. P > Nhấp vào đây cái nút >
thân hình >
Giải thích đoạn mã trên:
- Đầu tiên “setScroll()” hàm được xác định bên trong “
” nhãn. Biến “newWin” cũng được tạo ra để chứa “window.open()” phương pháp trong đó. - Tiếp theo, chuyển tham số đầu tiên của trang web “link” tới “window.open()” phương pháp. Ngoài ra, đặt giá trị “top” cho tham số thứ hai để hiển thị cửa sổ mới ở vị trí trên cùng của trình duyệt web.
- Sau đó, để tùy chỉnh hoạt động của cửa sổ, hãy sử dụng các tính năng cửa sổ của 'chiều rộng' , 'chiều cao' Và “thanh cuộn” để đặt chiều rộng và chiều cao cũng như thanh cuộn của cửa sổ tương ứng.
- Cuối cùng, tạo một 'cái nút' yếu tố kích hoạt “setScroll()” chức năng sử dụng 'trong một cái nhấp chuột' người nghe sự kiện.
Sau khi kết thúc quá trình biên dịch, kết quả đầu ra trông như thế này:
Đầu ra xác nhận rằng thanh cuộn đã được thêm vào cửa sổ mới được tạo.
Ví dụ 2: Đặt thanh cuộn theo cách thủ công
Một cách khác để đặt thanh cuộn là sử dụng CSS “tràn-y” Và “tràn-x” Properties trên trang phụ sẽ được mở trong một cửa sổ mới, như hiển thị bên dưới:
< cái đầu >< loại tập lệnh = 'văn bản/javascript' >
chức năng bộCuộn ( ) {
đã từng là mớiChiến thắng = cửa sổ. mở ( 'https://linuxhint.com' , đứng đầu , 'width=500,height=500,có thể thay đổi kích thước,thanh cuộn=1);
}
Nhấn nút bên dưới để mở Blog Linuxhint trên cửa sổ trong màn hình.
Nhấp vào Tôi