Phương thức Window open()

Định nghĩa và cách sử dụng

open() Phương thức sẽ mở một cửa sổ hoặc thẻ mới của trình duyệt, tùy thuộc vào cài đặt trình duyệt và giá trị của tham số.

Xem thêm:

Phương thức close()

Mô hình

Ví dụ 1

Mở "www.codew3c.com" trong thẻ mới của trình duyệt:

window.open("https://www.codew3c.com");

Thử trực tiếp

Trang dưới đây cung cấp nhiều ví dụ hơn.

Cú pháp

window.open(tham số, name, features, replace)

Tham số

Tham số mô tả
tham số

Tùy chọn. URL của trang cần mở.

Nếu không chỉ định tham sốthì sẽ mở một cửa sổ hoặc thẻ mới trống.
name Tùy chọn. Thuộc tính target hoặc tên của cửa sổ.
features Tùy chọn. Danh sách các mục phân cách bằng dấu phẩy, không có khoảng trống.
replace

Đã bị loại bỏ.

Định nghĩa URL là tạo mới hay thay thế tài liệu hiện tại trong danh sách lịch sử.

Hỗ trợ các giá trị sau:

  • true - URL thay thế tài liệu hiện tại trong danh sách lịch sử
  • false - URL tạo mới trong danh sách lịch sử

Cảnh báo:Chrome khi sử dụng replace Parameter sẽ ném ngoại lệ.

Tham số name hỗ trợ các giá trị sau:

giá trị mô tả
_blank URL được tải vào một cửa sổ hoặc thẻ mới. Mặc định.
_parent URL được tải vào khung cha.
_self URL thay thế trang hiện tại.
_top URL thay thế bất kỳ khung tập thể nào có thể được tải.
name tên cửa sổ (không chỉ định tiêu đề cửa sổ).

tham số features hỗ trợ các giá trị sau:

giá trị mô tả
fullscreen=yes|no|1|0 Có hiển thị trình duyệt trong chế độ toàn màn hình không. Mặc định là không. Cửa sổ chế độ toàn màn hình cũng phải ở chế độ rạp chiếu phim. Chỉ áp dụng cho IE.
height=pixels chiều cao cửa sổ, tính bằng pixel. Giá trị tối thiểu là 100.
left=pixels vị trí bên trái của cửa sổ (tọa độ X), tính bằng pixel. Không được phép có giá trị âm.
location=yes|no|1|0 Có hiển thị trường địa chỉ không. Chỉ áp dụng cho Opera.
menubar=yes|no|1|0 Có hiển thị thanh menu không.
resizable=yes|no|1|0 Cửa sổ có thể thay đổi kích thước không. Chỉ áp dụng cho IE.
scrollbars=yes|no|1|0 Có hiển thị thanh cuộn không. Chỉ áp dụng cho IE, Firefox và Opera.
status=yes|no|1|0 Có thêm thanh trạng thái không.
titlebar=yes|no|1|0 Có hiển thị thanh tiêu đề không. Trừ khi ứng dụng được gọi là ứng dụng HTML hoặc hộp thoại được tin tưởng, thì sẽ bị bỏ qua.
toolbar=yes|no|1|0 Có hiển thị thanh công cụ trình duyệt không. Chỉ áp dụng cho IE và Firefox.
top=pixels vị trí trên cùng của cửa sổ (tọa độ Y), tính bằng pixel. Không được phép có giá trị âm.
width=pixels bề rộng cửa sổ, tính bằng pixel. Giá trị tối thiểu là 100.

giá trị trả về

trả về tham chiếu đến cửa sổ mới, nếu gọi thất bại, sẽ là null.

chi tiết kỹ thuật

mô tả

open() phương thức sẽ tìm kiếm cửa sổ đã tồn tại hoặc mở cửa sổ trình duyệt mới. Nếu name tham số chỉ định cửa sổ đã tồn tại, thì trả về tham chiếu đến cửa sổ đó. Cửa sổ trả về sẽ hiển thị tham số tham số chỉ định tài liệu, nhưng bỏ qua features tham số. Trong trường hợp chỉ biết tên cửa sổ, đây là cách duy nhất mà JavaScript có thể nhận được tham chiếu đến cửa sổ đó.

nếu không chỉ định name tham số, hoặc cửa sổ đã chỉ định không tồn tại, thì open() phương thức sẽ tạo cửa sổ trình duyệt mới. Cửa sổ mới sẽ hiển thị tham số tham số chỉ định URL, tên của nó do name được chỉ định, kích thước và các điều khiển do features chỉ định. Nếu tham số là chuỗi rỗng, thì open() mở cửa sổ mới. Nếu

name tham số chỉ định tên cửa sổ mới. Tên này chỉ có thể chứa số, chữ cái hoặc dấu gạch dưới. Nó có thể được sử dụng làm <a> và <form> giá trị thuộc tính target, để buộc tài liệu hiển thị trong cửa sổ đã chỉ định.

khi sử dụng phương thức Window.open() Khi tải tệp tin mới vào cửa sổ đã có, bạn có thể truyền replace tham số, được sử dụng để tuyên bố tài liệu mới có mục riêng trong lịch sử duyệt web của cửa sổ hay thay thế mục của tài liệu hiện tại. Nếu replace giá trị là true, tài liệu mới sẽ thay thế tài liệu cũ. Nếu giá trị là false hoặc bị bỏ qua, tài liệu mới sẽ có một mục riêng trong lịch sử duyệt web của cửa sổ. Chức năng của tham số này tương tự như Location.replace() phương pháp cung cấp các chức năng rất tương tự.

đừng nhầm lẫn Window.open() phương pháp và Document.open() phương pháp, để làm cho mã của bạn rõ ràng hơn, bạn nên sử dụng Window.open(), và không nên sử dụng open(). Trong sự kiện xử lý được định nghĩa như một thuộc tính HTML, thường thì hàm open() được hiểu là Document.open()vì vậy, trong trường hợp này, bạn phải sử dụng Window.open().

Tính năng cửa sổ

features tham số là danh sách các tính năng mà cửa sổ cần hiển thị, các tính năng được phân tách bằng dấu phẩy. Nếu giá trị của tham số này là trống hoặc bị bỏ qua, cửa sổ sẽ hiển thị tất cả các tính năng. Tuy nhiên, nếu features đã chỉ định một tính năng, thì các tính năng không xuất hiện trong danh sách này sẽ không hiển thị trong cửa sổ. Lưu ý rằng chuỗi này không chứa bất kỳ khoảng trống hoặc ký tự trắng nào, và mỗi yếu tố có định dạng như sau:

feature[=value]

Đối với hầu hết các tính năng,value của chúng là yes hoặc no. Các tính năng sau dấu bằng và value Giá trị có thể bỏ qua, nếu có tính năng này, sẽ giả định giá trị của nó value Giá trị là yes, nếu không có, sẽ giả định value Giá trị là no. Tuy nhiên, giá trị của thuộc tính width hoặc height value Giá trị là bắt buộc, bạn nhất định phải chỉ định giá trị pixel của chúng.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ open():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Các ví dụ khác

Ví dụ 2

Mở trang about:blank trong cửa sổ/thẻ mới:

var myWindow = window.open("", "", "width=200,height=100");

Thử trực tiếp

Ví dụ 3

Mở cửa sổ mới có tên "MsgWindow" và viết một số văn bản vào đó:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

Thử trực tiếp

Ví dụ 4

Thay thế cửa sổ hiện tại bằng cửa sổ mới:

var myWindow = window.open("", "_self");
myWindow.document.write("<p>Tôi đã thay thế cửa sổ hiện tại.</p>")}

Thử trực tiếp

Ví dụ 5

Mở cửa sổ mới và kiểm soát diện mạo của nó:

window.open("https://www.codew3c.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

Thử trực tiếp

Ví dụ 6

Mở nhiều thẻ:

window.open("http://www.google.com/");
window.open("https://www.codew3c.com/");

Thử trực tiếp

Ví dụ 7

Mở cửa sổ mới. Sau đó sử dụng close() để đóng cửa sổ này:

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // Mở cửa sổ mới
}
function closeWin() {
  myWindow.close();   // Đóng cửa sổ mới này
}

Thử trực tiếp

Ví dụ 8

Mở cửa sổ mới. Sử dụng thuộc tính name để trả về tên của cửa sổ mới:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>Tên cửa sổ này là: " + myWindow.name + "</p>");

Thử trực tiếp

Ví dụ 9

Sử dụng thuộc tính opener để trả về tham chiếu đến cửa sổ tạo cửa sổ mới:

var myWindow = window.open("", "myWindow", "width=200,height=100");   // Mở cửa sổ mới
myWindow.document.write("<p>Đây là 'myWindow'</p>");   // Văn bản trong cửa sổ mới
myWindow.opener.document.write("<p>Đây là cửa sổ nguồn!</p>");  // Viết văn bản vào cửa sổ mới được tạo

Thử trực tiếp