…Và nó sẽ mở ra một cửa sổ mới với URL đã cho. Hầu hết các trình duyệt hiện đại được định cấu hình để mở url trong các tab mới thay vì các cửa sổ riêng biệt
Cửa sổ bật lên tồn tại từ thời cổ đại. Ý tưởng ban đầu là hiển thị nội dung khác mà không đóng cửa sổ chính. Hiện tại, có nhiều cách khác để làm điều đó. chúng tôi có thể tải động nội dung bằng tìm nạp và hiển thị nội dung đó trong một
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
5 được tạo động. Vì vậy, cửa sổ bật lên không phải là thứ chúng ta sử dụng hàng ngàyNgoài ra, cửa sổ bật lên rất phức tạp trên thiết bị di động, không hiển thị đồng thời nhiều cửa sổ
Tuy nhiên, có những tác vụ mà cửa sổ bật lên vẫn được sử dụng, e. g. đối với ủy quyền OAuth [đăng nhập bằng Google/Facebook/…], bởi vì
- Cửa sổ bật lên là một cửa sổ riêng biệt có môi trường JavaScript độc lập của riêng nó. Vì vậy, việc mở cửa sổ bật lên từ trang web không đáng tin cậy của bên thứ ba là an toàn
- Rất dễ dàng để mở một cửa sổ bật lên
- Cửa sổ bật lên có thể điều hướng [thay đổi URL] và gửi tin nhắn đến cửa sổ mở
Chặn cửa sổ bật lên
Trong quá khứ, các trang web độc ác đã lạm dụng cửa sổ bật lên rất nhiều. Một trang xấu có thể mở ra vô số cửa sổ bật lên có quảng cáo. Vì vậy, bây giờ hầu hết các trình duyệt đều cố gắng chặn cửa sổ bật lên và bảo vệ người dùng
Hầu hết các trình duyệt chặn cửa sổ bật lên nếu chúng được gọi bên ngoài trình xử lý sự kiện do người dùng kích hoạt như
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
0Ví dụ
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
Bằng cách này, người dùng được bảo vệ phần nào khỏi các cửa sổ bật lên không mong muốn, nhưng chức năng này không bị tắt hoàn toàn
cửa sổ. mở
Cú pháp để mở một cửa sổ bật lên là.
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
1urlMột URL để tải vào cửa sổ mới. nameTên của cửa sổ mới. Mỗi cửa sổ có một // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
2 và ở đây chúng ta có thể chỉ định cửa sổ nào sẽ sử dụng cho cửa sổ bật lên. Nếu đã có một cửa sổ có tên như vậy – URL đã cho sẽ mở trong đó, nếu không, một cửa sổ mới sẽ được mở. paramsChuỗi cấu hình cho cửa sổ mới. Nó chứa các cài đặt, được phân tách bằng dấu phẩy. Chẳng hạn như không được có khoảng trắng trong params. // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
3Cài đặt cho
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
4- Chức vụ
5 [số] – tọa độ của cửa sổ góc trên bên trái màn hình. Có một giới hạn. một cửa sổ mới không thể được định vị ngoài màn hình// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
6 [số] – chiều rộng và chiều cao của cửa sổ mới. Có giới hạn về chiều rộng/chiều cao tối thiểu, vì vậy không thể tạo cửa sổ ẩn// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- tính năng cửa sổ
7 [có/không] – hiển thị hoặc ẩn menu trình duyệt trên cửa sổ mới// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
8 [có/không] – hiển thị hoặc ẩn thanh điều hướng của trình duyệt [quay lại, chuyển tiếp, tải lại, v.v.] trên cửa sổ mới// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
9 [có/không] – hiển thị hoặc ẩn trường URL trong cửa sổ mới. FF và IE mặc định không cho ẩn// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
10 [có/không] – hiển thị hoặc ẩn thanh trạng thái. Một lần nữa, hầu hết các trình duyệt buộc nó phải hiển thị// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
11 [có/không] – cho phép tắt tính năng thay đổi kích thước cho cửa sổ mới. Không được khuyến khích// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
12 [có/không] – cho phép tắt thanh cuộn cho cửa sổ mới. Không được khuyến khích// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
Ngoài ra còn có một số tính năng dành riêng cho trình duyệt ít được hỗ trợ, thường không được sử dụng. Kiểm tra cửa sổ. mở trong MDN để biết ví dụ
Ví dụ. một cửa sổ tối giản
Hãy mở một cửa sổ với bộ tính năng tối thiểu, chỉ để xem trình duyệt nào cho phép tắt
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
1Ở đây, hầu hết các “tính năng cửa sổ” đều bị vô hiệu hóa và cửa sổ được đặt ngoài màn hình. Chạy nó và xem những gì thực sự xảy ra. Hầu hết các trình duyệt đều “sửa chữa” những thứ kỳ lạ như zero
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
6 và offscreen // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
5. Chẳng hạn, Chrome mở một cửa sổ như vậy với chiều rộng/chiều cao đầy đủ để nó chiếm toàn màn hìnhHãy thêm các phương án định vị thông thường và các tọa độ
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
15, // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
16, // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
17, // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
18 hợp lý// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
1Hầu hết các trình duyệt hiển thị ví dụ trên theo yêu cầu
Quy tắc cho cài đặt bị bỏ qua
- Nếu không có đối số thứ 3 trong lệnh gọi
19 hoặc nó trống, thì các tham số cửa sổ mặc định sẽ được sử dụng// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- Nếu có một chuỗi tham số, nhưng một số tính năng
10 bị bỏ qua, thì các tính năng bị bỏ qua được coi là có giá trị// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
11. Vì vậy, nếu bạn chỉ định tham số, hãy đảm bảo rằng bạn đã đặt rõ ràng tất cả các tính năng bắt buộc thành có// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- Nếu không có
5 trong thông số, thì trình duyệt sẽ cố mở một cửa sổ mới gần cửa sổ được mở lần cuối// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- Nếu không có
6 thì cửa sổ mới sẽ có cùng kích thước với cửa sổ được mở lần cuối// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
Truy cập cửa sổ bật lên từ cửa sổ
Cuộc gọi
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
19 trả về một tham chiếu đến cửa sổ mới. Nó có thể được sử dụng để thao tác các thuộc tính của nó, thay đổi vị trí và hơn thế nữaTrong ví dụ này, chúng tôi tạo nội dung bật lên từ JavaScript
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
8Và ở đây chúng tôi sửa đổi nội dung sau khi tải
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
9Xin lưu ý. ngay sau
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
15, cửa sổ mới chưa được tải. Điều đó được chứng minh bởi // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
16 trong dòng // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
17. Vì vậy, chúng tôi đợi // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
18 sửa đổi nó. Chúng tôi cũng có thể sử dụng trình xử lý // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
19 cho // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
80Chính sách xuất xứ giống nhau
Windows có thể tự do truy cập nội dung của nhau chỉ khi chúng đến từ cùng một nguồn gốc [cùng một giao thức. //miền. Hải cảng]
Nếu không, e. g. nếu cửa sổ chính là từ
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
81 và cửa sổ bật lên từ // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
82, điều đó là không thể vì lý do an toàn của người dùng. Để biết chi tiết, xem chương Giao tiếp qua cửa sổTruy cập cửa sổ từ cửa sổ bật lên
Một cửa sổ bật lên cũng có thể truy cập vào cửa sổ "trình mở" bằng cách sử dụng tham chiếu
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
83. Đó là // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
84 cho tất cả các cửa sổ ngoại trừ cửa sổ bật lênNếu bạn chạy mã bên dưới, nó sẽ thay thế nội dung cửa sổ mở [hiện tại] bằng “Kiểm tra”
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
0Vì vậy, kết nối giữa các cửa sổ là hai chiều. cửa sổ chính và cửa sổ bật lên có liên quan đến nhau
Đóng cửa sổ bật lên
Để đóng một cửa sổ.
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
85Để kiểm tra xem một cửa sổ có bị đóng không.
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
86Về mặt kỹ thuật, phương pháp
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
87 có sẵn cho bất kỳ // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
88 nào, nhưng hầu hết các trình duyệt đều bỏ qua // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
89 nếu // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
88 không được tạo bằng // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
91. Vì vậy, nó sẽ chỉ hoạt động trên cửa sổ bật lênThuộc tính
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
92 là // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
93 nếu cửa sổ đóng. Điều đó rất hữu ích để kiểm tra xem cửa sổ bật lên [hoặc cửa sổ chính] có còn mở hay không. Người dùng có thể đóng nó bất cứ lúc nào và mã của chúng tôi sẽ tính đến khả năng đóMã này tải và sau đó đóng cửa sổ
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
0Di chuyển và thay đổi kích thước
Có các phương pháp để di chuyển/thay đổi kích thước cửa sổ
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
94Di chuyển cửa sổ so với vị trí hiện tại // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
95 pixel sang bên phải và // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
96 pixel xuống dưới. Các giá trị âm được phép [để di chuyển sang trái/lên trên]. // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
97Di chuyển cửa sổ đến tọa độ // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
98 trên màn hình. // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
99Thay đổi kích thước cửa sổ theo // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
6 đã cho so với kích thước hiện tại. Cho phép giá trị âm. // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
01Thay đổi kích thước cửa sổ thành kích thước nhất địnhNgoài ra còn có sự kiện
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
02Chỉ cửa sổ bật lên
Để ngăn chặn lạm dụng, trình duyệt thường chặn các phương pháp này. Chúng chỉ hoạt động đáng tin cậy trên các cửa sổ bật lên mà chúng tôi đã mở, không có tab bổ sung
Không thu nhỏ/tối đa hóa
JavaScript không có cách nào để thu nhỏ hoặc phóng to cửa sổ. Các chức năng cấp hệ điều hành này bị ẩn khỏi các nhà phát triển Frontend
Các phương pháp di chuyển/thay đổi kích thước không hoạt động đối với các cửa sổ được phóng to/thu nhỏ
Cuộn một cửa sổ
Chúng ta đã nói về việc cuộn cửa sổ trong chương Kích thước cửa sổ và cuộn
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
03Cuộn cửa sổ // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
95 pixel sang phải và // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
96 xuống dưới so với cuộn hiện tại. Cho phép giá trị âm. // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
06Cuộn cửa sổ đến tọa độ đã cho // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
98. ________ 408 Cuộn cửa sổ để hiển thị ________ 409 ở trên cùng [mặc định] hoặc ở dưới cùng cho // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
00Ngoài ra còn có sự kiện
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
01Lấy nét/làm mờ cửa sổ
Về mặt lý thuyết, có các phương pháp
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
02 và // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
03 để lấy nét/không lấy nét trên một cửa sổ. Và cũng có các sự kiện // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
04 cho phép ghi lại khoảnh khắc người truy cập tập trung vào một cửa sổ và chuyển sang nơi khácMặc dù, trong thực tế, chúng bị hạn chế nghiêm trọng, bởi vì trong quá khứ các trang ác đã lạm dụng chúng
Ví dụ, nhìn vào mã này
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
2Khi người dùng cố gắng tắt cửa sổ [
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
05], nó sẽ đưa cửa sổ trở lại tiêu điểm. Mục đích là để "khóa" người dùng trong // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
88Vì vậy, các trình duyệt đã phải đưa ra nhiều giới hạn để cấm mã như vậy và bảo vệ người dùng khỏi các trang quảng cáo và tệ nạn. Chúng phụ thuộc vào trình duyệt
Chẳng hạn, một trình duyệt di động thường bỏ qua hoàn toàn
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
02. Ngoài ra, tiêu điểm không hoạt động khi cửa sổ bật lên mở trong một tab riêng thay vì một cửa sổ mớiTuy nhiên, có một số trường hợp sử dụng khi các cuộc gọi như vậy hoạt động và có thể hữu ích
Ví dụ
- Khi chúng tôi mở một cửa sổ bật lên, có thể nên chạy
08 trên đó. Chỉ trong trường hợp, đối với một số kết hợp hệ điều hành/trình duyệt, nó đảm bảo rằng người dùng hiện đang ở trong cửa sổ mới// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- Nếu chúng tôi muốn theo dõi khi khách truy cập thực sự sử dụng ứng dụng web của chúng tôi, chúng tôi có thể theo dõi
09. Điều đó cho phép chúng tôi tạm dừng/tiếp tục các hoạt động trong trang, hoạt ảnh, v.v. Nhưng xin lưu ý rằng sự kiện// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
20 có nghĩa là khách truy cập đã tắt từ cửa sổ, nhưng họ vẫn có thể quan sát thấy nó. Cửa sổ ở chế độ nền nhưng vẫn có thể hiển thị// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
Tóm lược
Cửa sổ bật lên hiếm khi được sử dụng vì có các lựa chọn thay thế. tải và hiển thị thông tin trong trang hoặc trong iframe
Nếu chúng tôi định mở một cửa sổ bật lên, một cách tốt là thông báo cho người dùng về nó. Biểu tượng “cửa sổ đang mở” gần liên kết hoặc nút sẽ cho phép khách truy cập sống sót sau khi chuyển tiêu điểm và ghi nhớ cả hai cửa sổ
- Một cửa sổ bật lên có thể được mở bằng cuộc gọi
21. Nó trả về tham chiếu đến cửa sổ mới mở// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- Trình duyệt chặn cuộc gọi
19 từ mã bên ngoài hành động của người dùng. Thông thường, một thông báo sẽ xuất hiện để người dùng có thể cho phép họ// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- Các trình duyệt mở một tab mới theo mặc định, nhưng nếu kích thước được cung cấp, thì đó sẽ là một cửa sổ bật lên
- Cửa sổ bật lên có thể truy cập cửa sổ mở bằng thuộc tính
83// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- Cửa sổ chính và cửa sổ bật lên có thể tự do đọc và sửa đổi lẫn nhau nếu chúng có cùng nguồn gốc. Nếu không, họ có thể thay đổi vị trí của nhau và trao đổi tin nhắn
Để đóng cửa sổ bật lên. sử dụng cuộc gọi
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
87. Ngoài ra, người dùng có thể đóng chúng [giống như bất kỳ cửa sổ nào khác]. // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
25 là // popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};
93 sau đó
Làm cách nào chúng tôi có thể mở cửa sổ mới trong JavaScript?
.