Chọn đúng phương thức của đối tượng cửa sổ trong JavaScript

Điều quan trọng là tìm hiểu cách JavaScript tương tác với trình duyệt. Để giao tiếp với trình duyệt, JavaScript sử dụng mô hình đối tượng trình duyệt (BOM). Nó xử lý các thành phần trình duyệt (lịch sử, vị trí, bộ điều hướng và màn hình). Tài liệu là tài sản của BOM

Trong hướng dẫn này, bạn sẽ tìm hiểu tất cả về đối tượng cửa sổ JavaScript, hiểu rõ hơn về nó là gì và cách bạn có thể làm việc với nó. Bạn sẽ tìm hiểu về các phương pháp của nó và cách bạn có thể sử dụng chúng

nội dung

Cửa sổ JavaScript. Mẹo chính

  • Mô hình đối tượng trình duyệt (BOM) giúp JavaScript giao tiếp với trình duyệt
  • Sử dụng các phương thức và thuộc tính của cửa sổ mà JavaScript cung cấp, bạn có thể sửa đổi một cửa sổ cụ thể và nhận thông tin về cửa sổ đó

đối tượng cửa sổ

Tất cả các trình duyệt đều hỗ trợ đối tượng sử dụng JavaScript window. Nó xác định cửa sổ của trình duyệt. Các đối tượng, hàm và biến JavaScript toàn cầu tự động trở thành một phần của đối tượng cửa sổ

Tất cả các biến toàn cục là các thuộc tính của đối tượng cửa sổ và tất cả các hàm toàn cục là các phương thức của nó. Toàn bộ tài liệu HTML cũng là một thuộc tính cửa sổ

Trong ví dụ bên dưới, bạn có thể thấy cách đối tượng document (thuộc HTML DOM) nằm trong thuộc tính của đối tượng window. Ở đây, chúng tôi chọn body của tài liệu

Sao chép ví dụ

window.document.getElementById("body");

Ví dụ tiếp theo này thực hiện chính xác điều tương tự. Tuy nhiên, nó được sử dụng để chỉ ra rằng hàm window không cần thiết để hàm hoạt động

Sao chép ví dụ

document.getElementById("body");

BOM vs. DOM

Đối với người mới bắt đầu, rất dễ nhầm lẫn giữa các thuật ngữ khác nhau, đặc biệt là những thuật ngữ trông rất giống nhau. Do đó, chúng tôi nghĩ rằng chúng ta nên làm rõ một lần nữa sự khác biệt chính giữa BOM và DOM là gì

BOM (mô hình đối tượng trình duyệt) cho phép JavaScript giao tiếp với trình duyệt và các thành phần của nó, như lịch sử, vị trí, trình điều hướng, màn hình và tài liệu

DOM (mô hình đối tượng tài liệu) thực sự đại diện cho tài liệu. tất cả các phần tử HTML, sự kiện, v.v. Như vậy, DOM là một phần của BOM

Chọn đúng phương thức của đối tượng cửa sổ trong JavaScript

ưu

  • Thiết kế đơn giản (không có thông tin không cần thiết)
  • Các khóa học chất lượng cao (ngay cả những khóa học miễn phí)
  • Tính năng đa dạng

Những đặc điểm chính

  • chương trình cấp bằng nano
  • Thích hợp cho doanh nghiệp
  • Giấy chứng nhận hoàn thành trả tiền

LOẠI TRỪ. GIẢM GIÁ 75%

Chọn đúng phương thức của đối tượng cửa sổ trong JavaScript

ưu

  • Dễ điều hướng
  • Không có vấn đề kỹ thuật
  • Có vẻ quan tâm đến người dùng của nó

Những đặc điểm chính

  • Rất nhiều khóa học đa dạng
  • chính sách hoàn tiền trong 30 ngày
  • Giấy chứng nhận hoàn thành miễn phí

THẤP NHƯ 12. 99$

Chọn đúng phương thức của đối tượng cửa sổ trong JavaScript

ưu

  • Trải nghiệm người dùng tuyệt vời
  • Cung cấp nội dung chất lượng
  • Rất minh bạch với giá cả của họ

Những đặc điểm chính

  • Giấy chứng nhận hoàn thành miễn phí
  • Tập trung vào các kỹ năng khoa học dữ liệu
  • Lịch học linh hoạt

GIẢM GIÁ 75%

Lấy kích thước cửa sổ

Thuộc tính chiều cao và chiều rộng có thể được sử dụng để trả về kích thước cửa sổ của trình duyệt. Cả hai thuộc tính đều trả về kích thước tính bằng pixel

Một cửa sổ trình duyệt mới có thể được mở từ tập lệnh JavaScript bằng phương thức open() của đối tượng cửa sổ. Cú pháp mở cửa sổ mới như sau

newWindowObj = window.open("URL", "WindowName", "feature, feature, feature .. ");

Phần sau đây cung cấp giải thích về các đối số được truyền cho phương thức open()

  • URL - Chỉ định URL của trang web sẽ được tải vào cửa sổ mới. Nếu không có URL nào được chỉ định, một cửa sổ trống sẽ được tải
  • WindowName - Chỉ định tên cửa sổ và được sử dụng để chỉ cửa sổ
  • các tính năng - Danh sách các tính năng được phân tách bằng dấu phẩy cho phép bạn tùy chỉnh giao diện của cửa sổ. Tùy chọn là
SettingExplanationwidthChỉ định chiều rộng ban đầu của cửa sổ ứng dụng trình duyệt (xem innerWidth để biết kích thước của vùng nội dung)heightChỉ định chiều cao ban đầu của cửa sổ ứng dụng trình duyệt (xem innerHeight để biết kích thước của vùng nội dung)innerWidthChỉ định chiều rộng ban đầu của vùng nội dung cửa sổinnerHeightChỉ định chiều cao ban đầu của . thư mụcChỉ định xem cửa sổ có chứa thanh công cụ cá nhân của trình duyệt hay không. copyHistoryXác định xem cửa sổ mới có chứa bản sao lịch sử URL của cửa sổ đang gọileftChỉ định số lượng pixel từ phía bên trái của màn hình đến cửa sổ mới trên cùngChỉ định số lượng pixel từ đầu màn hình đến cửa sổ mới luôn luônLoweredTạo một cửa sổ mới . Thường được sử dụng cho những quảng cáo bật xuống gây phiền nhiễu. luôn được nâng lên Tạo một cửa sổ mới luôn ở vị trí trên cùng của các cửa sổ trình duyệt khác trên màn hình. z-lockKhóa cấp độ trình duyệt xuất hiện so với các cửa sổ trình duyệt khác

Các tính năng chiều cao, chiều rộng và vị trí được đặt bằng số. Các tùy chọn tính năng còn lại có thể được đặt bằng cách sử dụng các giá trị đúng hoặc sai (đồng thời có, không và 1 và 0 có thể được sử dụng thay cho đúng và sai). Một thuộc tính vắng mặt được coi là sai. Ví dụ sau tạo một cửa sổ mới có thanh thực đơn, kích thước cụ thể và không có thanh công cụ

newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");

Đóng cửa sổ trình duyệt bằng JavaScript

Một cửa sổ có thể được đóng bằng phương thức close() của đối tượng cửa sổ. Tên của cửa sổ (được chỉ định trong phương thức open()) phải được tham chiếu khi thực hiện thao tác đóng để bạn chắc chắn đóng đúng cửa sổ. Ví dụ: đoạn mã sau tạo một cửa sổ mới và tạo một nút bấm, khi được nhấp vào, sẽ đóng cửa sổ mới



  


Cũng có thể đóng cửa sổ đã mở cửa sổ hiện tại bằng thuộc tính opener của đối tượng cửa sổ hiện tại

window.opener.close()

Thao tác này sẽ đóng cửa sổ đã mở cửa sổ chạy đoạn mã trên

Di chuyển và thay đổi kích thước Windows

Một cửa sổ có thể được di chuyển đến các tọa độ cụ thể trên màn hình bằng cách sử dụng phương thức moveTo() của đối tượng cửa sổ, lấy tọa độ x và y làm đối số. Ví dụ sau di chuyển một cửa sổ mới đến vị trí 100, 200 trên màn hình khi nhấn nút "Move Window"



  


Ngoài việc di chuyển một cửa sổ đến một vị trí mới cụ thể, bạn cũng có thể di chuyển một cửa sổ so với vị trí hiện tại của nó trên màn hình bằng cách sử dụng phương thức moveBy() của đối tượng cửa sổ JavaScript. Một lần nữa, phương thức lấy các giá trị x và y được thêm vào tọa độ x và y hiện tại của cửa sổ đã chỉ định. Giá trị âm có thể được sử dụng để thay đổi hướng chuyển động



  


Các phương thức resizeTo() và resizeBy() của cửa sổ hoạt động tương tự nhau ở chỗ chúng cho phép bạn thay đổi kích thước của cửa sổ thành một kích thước cụ thể hoặc thành một kích thước mới so với kích thước hiện tại

Thay đổi tiêu điểm cửa sổ

Khi một cửa sổ là cửa sổ hiện được chọn trên màn hình, nó được cho là có tiêu điểm. Thông thường, nhấp bằng con trỏ chuột trong một cửa sổ sẽ đặt tiêu điểm cho cửa sổ đó. Với JavaScript, có thể lập trình thay đổi tiêu điểm của cửa sổ bằng cách sử dụng các phương thức focus() và blur(). Ví dụ sau hiển thị một cửa sổ mới, làm mờ nó để cửa sổ đang mở vẫn có tiêu điểm và cung cấp một nút để chuyển tiêu điểm sang cửa sổ mới



  


Hiển thị Hộp thoại Hộp Thông báo

Đối tượng cửa sổ JavaScript cung cấp các phương thức để hiển thị ba loại hộp thoại thông báo, hộp thoại cảnh báo, xác nhận và nhắc nhở

Đâu là phương thức chính xác của đối tượng cửa sổ trong JavaScript?

Phương thức đối tượng cửa sổ

Đó là thuộc tính chính xác của đối tượng cửa sổ?

Thuộc tính của đối tượng cửa sổ

Làm cách nào để chọn cửa sổ trong JavaScript?

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.

Phương thức cửa sổ trong JavaScript là gì?

Biến toàn cầu, window , đại diện cho cửa sổ trong đó tập lệnh đang chạy , tiếp xúc với mã JavaScript. Giao diện Window là nơi chứa nhiều chức năng, không gian tên, đối tượng và hàm tạo không nhất thiết phải liên quan trực tiếp đến khái niệm cửa sổ giao diện người dùng.