Làm cách nào để truy cập đối tượng cửa sổ trong JavaScript?
|
Là một nhà phát triển phụ trợ cùng nhau hack các giao diện người dùng, tôi đã sao chép/dán các hàm chứa đối tượng window.open("https://www.w3schools.com")0 (mà không hiểu nó) nhiều hơn mức tôi muốn thừa nhận Show
Nhưng khi tôi thúc đẩy bản thân tiến xa hơn trong lĩnh vực phát triển giao diện người dùng, việc thực sự hiểu nó trở nên hữu ích Tóm lại, đối tượng window.open("https://www.w3schools.com")0,
Bây giờ thay vì đưa ra một danh sách dài gồm các thuộc tính của đối tượng window.open("https://www.w3schools.com")0, đây là 10 cách tôi đã thực sự sử dụng đối tượng window.open("https://www.w3schools.com")01. Chuyển hướng đến một URL mới, mở và đóng các tab Đối tượng window.open("https://www.w3schools.com")7 trên window.open("https://www.w3schools.com")0 có thể được sử dụng để nhảy URL. Điều này được thực hiện bằng cách chỉ định lại cho nó một URL mới________số 8Thông thường, bạn sẽ muốn chuyển hướng này có điều kiện khi nhấp vào nút hoặc phần tử DOM khác. Trong ReactJS, nó có thể được thực hiện như thế này Đôi khi chúng tôi không muốn mất trang hiện tại. Điều này có thể được xử lý bằng phương thức window.open("https://www.w3schools.com")9 mở URL trong tab mớiwindow.open("https://www.w3schools.com")Nó cũng dễ dàng để đóng tab hiện tại window.open("https://www.w3schools.com")22. Thực hiện cuộn vô hạn Cuộn vô hạn đề cập đến việc thêm các mục bổ sung vào DOM, khi người dùng chạm đến cuối các mục hiện có. Cuộn vô hạn thường được triển khai trong các chế độ xem hiển thị kết quả tìm kiếm Có thư viện cho điều này… Nhưng trong khi tôi tránh hội chứng không được phát minh ở đây, thì không cần phải thêm toàn bộ thư viện nếu bạn có thể giải quyết vấn đề trong 10 dòng mã Ở mức cao, chúng ta có thể triển khai tính năng cuộn vô hạn bằng 3 thuộc tính sau trên window.open("https://www.w3schools.com")0window.open("https://www.w3schools.com")4Với các biến trên, chúng ta có thể viết mã để kích hoạt và tải nhiều đối tượng hơn khi người dùng cuộn gần cuối trang window.open("https://www.w3schools.com")5Kết nối điều này với trình xử lý sự kiện (chúng tôi sẽ đến đó sau một phút nữa) trên window.open("https://www.w3schools.com")0 và bạn vừa cuộn cuộn vô hạn của riêng mìnhCòn một số công việc nữa để làm cho điều này tương thích với tất cả các trình duyệt 3. Truy cập và thao tác các phần tử DOM Khả năng thao tác DOM là điều làm cho JavaScript trở nên tuyệt vời. Đó là điều giúp chúng tôi xây dựng giao diện người dùng năng động Điều bạn có thể không biết là đối tượng window.open("https://www.w3schools.com")3, cho phép chúng ta truy cập vào DOM, là một thuộc tính trên đối tượng window.open("https://www.w3schools.com")0Vì vậy, khi bạn đang gọi đây window.open("https://www.w3schools.com")9Bạn đang thực sự gọi đây là window.open("https://www.w3schools.com")04. Truy cập thông tin liên quan đến URL hiện tại Chúng tôi đã đề cập đến việc sử dụng window.open("https://www.w3schools.com")7 để chuyển hướng, nhưng nó có thể làm được nhiều hơn thếKhi bạn gọi window.open("https://www.w3schools.com")25 trong bảng điều khiển, một số thuộc tính được trả vềChúng có thể được sử dụng để xác định trang nào người dùng hiện tại đang xem Thông thường, sẽ rất hữu ích khi gọi và phân tích cú pháp window.open("https://www.w3schools.com")26 để chúng tôi có thể kích hoạt logic một cách có điều kiện khi người dùng ở trên một trang cụ thểwindow.open("https://www.w3schools.com")45. Thêm trình lắng nghe sự kiện trên cửa sổ Thông thường, chúng tôi thêm trình xử lý sự kiện vào các phần tử DOM cụ thể Nhưng đôi khi chúng tôi muốn người nghe trực tiếp trên chính window.open("https://www.w3schools.com")0Trong ví dụ cuộn vô hạn ở trên, chúng tôi muốn kiểm tra trạng thái cuộn hiện tại bất cứ khi nào người dùng đang cuộn Đây là trường hợp thêm trình xử lý sự kiện trên đối tượng window.open("https://www.w3schools.com")0. Trong React, bạn có thể bọc cái này trong một móc window.open("https://www.w3schools.com")29, như vậywindow.open("https://www.w3schools.com")8Điều này sẽ kích hoạt window.open("https://www.w3schools.com")40 bất cứ khi nào người dùng cuộn6. Logic kích hoạt sau một khoảng thời gian đã đặt hoặc ở một khoảng thời gian đã đặtĐôi khi bạn muốn kích hoạt logic trong một khoảng thời gian cụ thể sau khi một sự kiện xảy ra. Đối với điều này, hãy sử dụng window.open("https://www.w3schools.com")41Bạn có thể thử điều này trong bảng điều khiển trình duyệt của mình Nó sẽ bắt đầu một cửa sổ bật lên 5 giây sau khi chạy Bây giờ nếu bạn muốn kích hoạt logic cứ sau 5 giây, bạn có thể làm điều tương tự với window.open("https://www.w3schools.com")42Đừng thực sự chạy cái này trong bảng điều khiển của bạn vì nó sẽ cực kỳ khó chịu khi một cảnh báo bật lên cứ sau 5 giây Đây là một trường hợp đơn giản sử dụng cảnh báo. Nhưng một trường hợp phức tạp hơn có thể là tạo một yêu cầu ajax cho phần phụ trợ, để ghi lại thông tin bất cứ khi nào người dùng xem một trang trong hơn 10 giây 7. Cửa sổ bật lên nhắc nhở, xác nhận và cảnh báo Những cửa sổ bật lên này chắc chắn cần một số kiểu dáng trước khi triển khai chúng vào sản xuất, nhưng chúng có các trường hợp sử dụng của chúng window.open("https://www.w3schools.com")43 có thể được sử dụng để yêu cầu người dùng cung cấp thông tin và gán thông tin đó cho một biếnwindow.open("https://www.w3schools.com")44 thường được sử dụng để kiểm tra người dùng trước khi xóa nội dung nào đóVà window.open("https://www.w3schools.com")45 là… cũng chỉ là một cảnh báoMặc dù có mùi web từ những năm 90, nhưng đôi khi bạn sẽ muốn một cửa sổ bật lên đơn giản để truyền đạt thông tin cho người dùng Lời khuyên duy nhất của tôi là vui lòng sắp xếp lại các cửa sổ bật lên này trước khi sử dụng chúng 8. Cuộn đến một điểm cụ thể trên trang hoặc theo một số pixel được chỉ định Đôi khi bạn muốn cuộn người dùng đến một điểm cụ thể trên trang. window.open("https://www.w3schools.com")46 có thể đạt được điều nàyThao tác này sẽ cuộn người dùng xuống 1000 pixel từ đầu trang. Các đối số lần lượt là tọa độ pixel x và y để cuộn đến Để cuộn theo một số pixel cụ thể, thay vì đến một điểm cụ thể, hãy sử dụng phương pháp window.open("https://www.w3schools.com")47Một lần nữa, các đối số là số pixel để cuộn theo chiều ngang và chiều dọc 9. Đối tượng màn hình Đối tượng màn hình đại diện cho khu vực hiện có thể xem được Gọi window.open("https://www.w3schools.com")48 trong bảng điều khiển sẽ trả về như sauMàn hình có thể hữu ích nếu bạn quyết định hiển thị các đối tượng khác nhau tùy thuộc vào chiều rộng hoặc chiều cao của màn hình. Ví dụ Sự khác biệt giữa window.open("https://www.w3schools.com")49 và window.open("https://www.w3schools.com")50 là gì?Câu hỏi tuyệt vời window.open("https://www.w3schools.com")51 là chiều rộng của nội dung được hiển thị trong trình duyệt, không bao gồm dấu trang, trình kiểm tra phần tử, v.v.window.open("https://www.w3schools.com")52 là độ rộng của độ phân giải màn hình thiết bị của bạn10. cửa sổ. bảng điều khiển. đăng nhập Chúng ta sẽ ở đâu nếu không có window.open("https://www.w3schools.com")53 để in các biến và thông báo?Khi bạn gọi cái này Bạn đang thực sự gọi đây là window.open("https://www.w3schools.com")54 cũng là một phần của đối tượng window.open("https://www.w3schools.com")0Phần kết luận Danh sách này chứa hầu hết các cách tôi thấy đối tượng window.open("https://www.w3schools.com")0 hữu ích trong sự nghiệp JavaScript ngắn của mìnhThật thú vị khi tìm hiểu và hiểu một đối tượng mà tôi đã sử dụng nhưng chưa bao giờ dành thời gian để chơi cùng Làm cách nào để chọn đối tượng cửa sổ trong JavaScript?Một đối tượng của cửa sổ được tạo tự động bởi trình duyệt.
. Các phương thức của đối tượng cửa sổ Làm cách nào để truy cập phần tử cửa sổ trong JavaScript?Một số phương thức khác. . cửa sổ. open() - mở một cửa sổ mới cửa sổ. close() - đóng cửa sổ hiện tại cửa sổ. moveTo() - di chuyển cửa sổ hiện tại cửa sổ. resizeTo() - thay đổi kích thước cửa sổ hiện tại Làm cách nào để in đối tượng cửa sổ trong JavaScript?cửa sổ. in (). Đối tượng window đại diện cho một cửa sổ chứa tài liệu DOM; . print() được sử dụng để mở Hộp thoại In để in tài liệu hiện tại.
Đối tượng cửa sổ có phải là một phần của DOM không?Đối tượng cửa sổ không phải là một phần của DOM . Nó là một đối tượng máy chủ được triển khai dưới dạng "đối tượng toàn cầu" để hoàn thành triển khai ECMAScript. |
