Tôi sử dụng dấu trang JavaScript trong Mozilla Firefox để mở email, lịch, trò chuyện, v.v. trong các cửa sổ con bật lên không có thanh công cụ hoặc thanh menu. Tôi làm điều này để tiết kiệm diện tích màn hình và ngăn tôi sử dụng các cửa sổ đó để duyệt và luôn hiển thị chúng. Tôi đã tự hỏi làm thế nào để có các cửa sổ bật lên mà không có thanh địa chỉ
Mozilla có lý do chính đáng để đảm bảo thanh địa chỉ luôn hiển thị - để người dùng không bị lừa bởi cửa sổ bật lên - do đó, thanh địa chỉ không thể bị ẩn bằng mã. Tuy nhiên, có một cách để giải quyết vấn đề này, hãy tiến hành một cách thận trọng, vì đây là một sự thay đổi toàn cầu
Vấn đề
Trước đây tôi đã chia sẻ một vài bookmarklet của mình, một trong số đó là mở một cửa sổ trình duyệt có kích thước cụ thể bằng cách sử dụng
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};javascript:[[]=>{window.open["//www.google.com/","_g","width=800,height=400,toolbar=0"]?.focus[]}][]Firefox sẽ mở cửa sổ giống như thế này - và bạn có thể thấy thanh địa chỉ vẫn hiển thị mặc dù không thể chỉnh sửa
cách giải quyết
Giải pháp ẩn thanh địa chỉ liên quan đến việc tạo kiểu
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};Tôi đã tìm thấy giải pháp trên Diễn đàn hỗ trợ Mozilla này, mà Jefferson Scher, jscher2000, đã cung cấp câu trả lời. Ông. Scher có một trang web trình bày chi tiết hơn về việc tùy chỉnh kiểu dáng Firefox với userChrome để giảm khoảng trắng, ẩn các mục menu không mong muốn, v.v.
Đây là những gì tôi đã làm cho Firefox Developer Edition trên macOS
- Đầu tiên, để tìm ra thư mục hồ sơ người dùng hiện tại
- trong thanh địa chỉ Firefox, điều hướng đến
5,// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; }; - nhấn nút Show in Finder để mở thư mục hồ sơ, thư mục này trên macOS trông giống như
6// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
- trong thanh địa chỉ Firefox, điều hướng đến
- Tiếp theo, trong thư mục hồ sơ [không nằm trong thư mục mẹ
7], hãy tạo một thư mục có tên là// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
8// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; }; - Và, trong thư mục
8, hãy tạo một tệp có tên// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
4 chứa// popup blocked window.open['//javascript.info']; // popup allowed button. title = [] => { window.open['//javascript.info']; };
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}- Sau đó, để thiết lập Firefox sử dụng cấu hình này, hãy điều hướng đến
1#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; } - Lưu ý rằng không nên chỉnh sửa cài đặt Firefox - nhấp vào Chấp nhận rủi ro và tiếp tục nếu bạn hiểu các rủi ro và muốn tiếp tục
- Tìm cài đặt
2 [tìm kiếm cho#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
3]#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; } - Và nhấp vào nút [có hai mũi tên] để chuyển đổi
4 thành#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
5#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
- Đóng tab rồi đóng hoàn toàn Firefox
- Cuối cùng, khởi động lại Firefox và thử lại bookmarklet, lần này bạn sẽ nhận được các cửa sổ bật lên không có thanh địa chỉ
Qua một bên. Bạn cũng có thể quan tâm đến bookmarklet để tạo cửa sổ Firefox ở chế độ toàn màn hình khi sử dụng chế độ xem chia nhỏ macOS, để ẩn thanh địa chỉ, thanh công cụ và các tab
…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
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Ngoà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'];
};Ví 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'];
};// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};Cài đặt cho
// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};- Chức vụ
5 [số] – tọa độ của góc trên cùng bên trái của cửa sổ trên 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']; };
80 [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ị#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
81 [có/không] – cho phép vô hiệu hóa thay đổi kích thước cho cửa sổ mới. Không được khuyến khích#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
82 [có/không] – cho phép tắt thanh cuộn cho cửa sổ mới. Không được khuyến khích#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
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ụ
Thí 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
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Ở đâ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ư số không ________ 76 và ngoài màn hình ________ 75. 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ình
Hãy thêm các phương án định vị thông thường và các tọa độ
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Hầ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
89 hoặc nó trống, thì các tham số cửa sổ mặc định sẽ được sử dụng#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; } - Nếu có một chuỗi tham số, nhưng một số tính năng
80 bị bỏ qua, thì các tính năng bị bỏ qua được coi là có giá trị#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
81. 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ó#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; } - 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
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Trong ví dụ này, chúng tôi tạo nội dung bật lên từ JavaScript
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Và ở đây chúng tôi sửa đổi nội dung sau khi tải
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Xin lưu ý. ngay sau
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Chí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ừ
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}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
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Nế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”
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Vì 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ổ.
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Để kiểm tra xem một cửa sổ có bị đóng không.
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Về mặt kỹ thuật, phương pháp
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Thuộc tính
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Mã này tải và sau đó đóng cửa sổ
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Di 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ổ
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Ngoài ra còn có sự kiện
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Chỉ 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
________ 473 Cuộn cửa sổ _____ 365 pixel sang phải và ________ 366 xuống dưới so với cuộn hiện tại. Cho phép giá trị âm. ________ 476 Cuộn cửa sổ đến tọa độ đã cho ________ 368. ________ 478 Cuộn cửa sổ để làm cho ________ 479 hiển thị ở trên cùng [mặc định] hoặc ở dưới cùng cho#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Ngoài ra còn có sự kiện
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Lấy nét/làm mờ cửa sổ
Về mặt lý thuyết, có các phương pháp
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Mặ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'];
};Khi người dùng cố gắng tắt cửa sổ [
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Vì 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
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}Tuy 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
78 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#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; } - Nếu chúng tôi muốn theo dõi thời điểm khách truy cập thực sự sử dụng ứng dụng web của mình, chúng tôi có thể theo dõi
79. Đ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#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; }
90 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']; };
Bản tóm tắt
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
91. 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
89 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ọ#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; } - 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
53#main-window[chromehidden*="toolbar"] #nav-bar { visibility:collapse; } - 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
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}// popup blocked
window.open['//javascript.info'];
// popup allowed
button. title = [] => {
window.open['//javascript.info'];
};#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}