Bạn đang xem : cửa sổ bật lên mở javascript

Cửa sổ bật lên là một trong những phương pháp lâu đời nhất để hiển thị tài liệu bổ sung cho người dùng.

Về cơ bản, bạn chỉ cần chạy:

  window.open ('https://javascript.info/')  

… 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 đều đượ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ừ rất xa xưa. Ý tưởng ban đầu là hiển thị một nội dung khác mà không cần đó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 với tìm nạp và hiển thị nội dung đó trong & lt; div & gt; đượ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ày.

Ngoài ra, các 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ị nhiều cửa sổ đồng thời.

Tuy nhiên, vẫn có những tác vụ mà cửa sổ bật lên vẫn được sử dụng, ví dụ: để ủy quyền OAuth (đăng nhập bằng Google / Facebook /…), vì:

  1. 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ừ một trang web không đáng tin cậy của bên thứ ba là an toàn.
  2. Mở cửa sổ bật lên rất dễ dàng.
  3. Một 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ở.

Trước đây, các trang web xấu đã lạm dụng cửa sổ bật lên rất nhiều. Một trang xấu có thể mở rất nhiều cửa sổ bật lên có quảng cáo. Vì vậy, hiện nay hầu hết các trình duyệt đều cố gắng chặn các 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 đều chặn cửa sổ bật lên nếu chúng được gọi bên ngoài các trình xử lý sự kiện do người dùng kích hoạt như onclick .

Ví dụ:

  // cửa sổ bật lên bị chặn
window.open ('https://javascript.info');

// cửa sổ bật lên được phép
button.onclick = () = & gt; {
  window.open ('https://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.

Điều gì sẽ xảy ra nếu cửa sổ bật lên mở ra từ onclick , nhưng sau setTimeout ? Đó là một chút khó khăn.

Hãy thử mã này:


  // mở sau 3 giây
setTimeout (() = & gt; window.open ('http://google.com'), 3000);  

Cửa sổ bật lên mở ra trong Chrome nhưng bị chặn trong Firefox.

… Nếu chúng tôi giảm độ trễ, cửa sổ bật lên cũng hoạt động trong Firefox:


  // mở sau 1 giây
setTimeout (() = & gt; window.open ('http://google.com'), 1000);  

Sự khác biệt là Firefox xử lý thời gian chờ từ 2000ms trở xuống là có thể chấp nhận được, nhưng sau đó – loại bỏ “niềm tin”, giả sử rằng bây giờ đó là “bên ngoài hành động của người dùng”. Vì vậy, cái đầu tiên bị chặn và cái thứ hai thì không.

Cú pháp để mở cửa sổ bật lên là: window.open (url, tên, thông số) :

url
Một URL để tải vào cửa sổ mới.
tên
Tên của cửa sổ mới. Mỗi cửa sổ có một window.name 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 – thì URL đã cho sẽ mở ra trong đó, nếu không thì một cửa sổ mới sẽ được mở.
params
Chuỗ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. Không được có khoảng trắng trong các tham số, ví dụ: width = 200, height = 100 .

Cài đặt cho params :

  • Vị trí:
    • left / top (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 hạn chế: không thể định vị cửa sổ mới ngoài màn hình.
    • width / height (số) – chiều rộng và chiều cao của một 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.
  • Các tính năng của cửa sổ:
    • menubar (yes / no) – hiển thị hoặc ẩn menu trình duyệt trên cửa sổ mới.
    • thanh công cụ (yes / no) – 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.
    • location (yes / no) – hiển thị hoặc ẩn trường URL trong cửa sổ mới. FF và IE không cho phép ẩn nó theo mặc định.
    • status (yes / no) – 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ị.
    • có thể thay đổi kích thước (yes / no) – cho phép tắt thay đổi kích thước cho cửa sổ mới. Không được khuyến khích.
    • thanh cuộn (yes / no) – cho phép tắt thanh cuộn cho cửa sổ mới. Không được khuyến khích.
Xem Thêm  Thêm vị trí địa lý vào ứng dụng web của bạn - thêm vị trí địa lý vào trang web

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ợ hơn, những tính năng này thường không được sử dụng. Kiểm tra window.open trong MDN để biết các ví dụ.

Hãy mở một cửa sổ với tập hợp tối thiểu các tính năng, chỉ để xem trình duyệt nào trong số chúng cho phép tắt:


  let params = `scrollbars = no, resizable = no, status = no, location = no, toolbar = no, menubar = no,
width = 0, height = 0, left = -1000, top = -1000`;

open ('/', 'test', params);  

Tại đây, hầu hết các “tính năng cửa sổ” đều bị tắt và cửa sổ được đặt ở vị trí 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ư 0 width / height và ngoài màn hình left / top . Ví dụ: Chrome mở một cửa sổ như vậy với đầy đủ chiều rộng / chiều cao để nó chiếm toàn màn hình.

Hãy thêm các tùy chọn định vị thông thường và tọa độ width , height , left , top hợp lý:

  let params = `scrollbars = no, resizable = no, status = no, location = no, toolbar = no, menubar = no,
width = 600, height = 300, left = 100, top = 100`;

open ('/', 'test', params);  

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 open hoặc nó trống, thì các tham số cửa sổ mặc định sẽ được sử dụng.
  • Nếu có một chuỗi tham số, nhưng một số tính năng yes / no bị bỏ qua, thì các tính năng bị bỏ qua được giả định có giá trị no . Vì vậy, nếu bạn chỉ định các tham số, hãy đảm bảo bạn đặt rõ ràng tất cả các tính năng bắt buộc thành có.
  • Nếu không có left / top trong các tham số, thì trình duyệt sẽ cố gắng mở một cửa sổ mới gần cửa sổ được mở cuối cùng.
  • Nếu không có width / height , 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.

Lệnh gọi open trả về một tham chiếu đến cửa sổ mới. Nó có thể được sử dụng để điều khiển các thuộc tính của nó, thay đổi vị trí và thậm chí hơn thế nữa.

Trong ví dụ này, chúng tôi tạo nội dung bật lên từ JavaScript:

  let newWin = window.open ("about: blank", "hello", "width = 200, height = 200");

newWin.document.write ("Hello, world!");  

Và tại đây, chúng tôi sửa đổi nội dung sau khi tải:


  let newWindow = open ('/', 'example', 'width = 300, height = 300')
newWindow.focus ();

alert (newWindow.location.href); // (*) about: blank, quá trình tải vẫn chưa bắt đầu

newWindow.onload = function () {
  let html = `& lt; div style =" font-size: 30px "& gt; Chào mừng bạn! & lt; / div & gt;`;
  newWindow.document.body.insertAdjacentHTML ('afterbegin', html);
};  

Xin lưu ý: ngay sau window.open , cửa sổ mới chưa được tải. Điều đó được thể hiện qua alert trong dòng (*) . Vì vậy, chúng tôi đợi onload sửa đổi nó. Chúng tôi cũng có thể sử dụng trình xử lý DOMContentLoaded cho newWin.document .

Chính sách xuất xứ giống nhau

Các Windows chỉ có thể tự do truy cập nội dung của nhau nếu chúng có cùng nguồn gốc (cùng giao thức: // domain: port).

Nếu không, ví dụ: nếu cửa sổ chính là từ site.com và cửa sổ bật lên từ gmail.com , thì điều đó là không thể vì lý do an toàn cho người dùng. Để biết chi tiết, hãy xem chương Giao tiếp qua nhiều cửa sổ .

Một cửa sổ bật lên cũng có thể truy cập vào cửa sổ “mở” bằng cách sử dụng tham chiếu window.opener . Nó là null cho tất cả các cửa sổ ngoại trừ cửa sổ bật lên.

Nếu bạn chạy mã bên dưới, mã này sẽ thay thế nội dung cửa sổ mở (hiện tại) bằng “Kiểm tra”:


  let newWin = window.open ("about: blank", "hello", "width = 200, height = 200");

newWin.document.write (
  "& lt; script & gt; window.opener.document.body.innerHTML = 'Kiểm tra' & lt; \ / script & gt;"
);  

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ó tham chiếu đến nhau.

Để đóng cửa sổ: win.close () .

Để kiểm tra xem một cửa sổ có bị đóng hay không: win.closed .

Về mặt kỹ thuật, phương thức close () có sẵn cho bất kỳ window nào, nhưng window.close () bị hầu hết các trình duyệt bỏ qua nếu < code> window không được tạo bằng window.open () . Vì vậy, nó sẽ chỉ hoạt động trên cửa sổ bật lên.

Xem Thêm  ĐỊNH DẠNG (Transact-SQL) - Máy chủ SQL - sql thay đổi định dạng số

Thuộc tính closed true nếu cửa sổ được đó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 nên tính đến khả năng đó.

Mã này tải và sau đó đóng cửa sổ:


  let newWindow = open ('/', 'example', 'width = 300, height = 300');

newWindow.onload = function () {
  newWindow.close ();
  cảnh báo (newWindow.closed); // thật
};  

Có các phương pháp để di chuyển / thay đổi kích thước cửa sổ:

win.moveBy (x, y)
Di chuyển cửa sổ liên quan đến vị trí hiện tại x pixel sang bên phải và y pixel xuống dưới. Giá trị âm được phép (di chuyển sang trái / lên).
win.moveTo (x, y)
Di chuyển cửa sổ đến tọa độ (x, y) trên màn hình.
win.resizeBy (width, height)
Thay đổi kích thước cửa sổ theo width / height đã cho so với kích thước hiện tại. Giá trị âm được cho phép.
win.resizeTo (width, height)
Thay đổi kích thước cửa sổ thành kích thước đã cho.

Ngoài ra còn có sự kiện window.onresize .

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 một 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ổ đã phóng to / thu nhỏ.

Chúng ta đã nói về cách cuộn cửa sổ trong chương Kích thước cửa sổ và cách cuộn .

win.scrollBy (x, y)
Cuộn cửa sổ sang phải x pixel và y xuống dưới so với cuộn hiện tại. Giá trị âm được cho phép.
win.scrollTo (x, y)
Cuộn cửa sổ đến tọa độ đã cho (x, y) .
elem.scrollIntoView (top = true)
Cuộn cửa sổ để elem hiển thị ở trên cùng (mặc định) hoặc ở cuối đối với elem.scrollIntoView (false) .

Ngoài ra còn có sự kiện window.onscroll .

Về mặt lý thuyết, có các phương thức window.focus () window.blur () để lấy nét / không tập trung trên một cửa sổ. Ngoài ra, còn có các sự kiện tiêu điểm / làm mờ cho phép ghi lại khoảnh khắc khi khách truy cập tập trung vào một cửa sổ và chuyển sang nơi khác.

Mặc dù trên thực tế, chúng bị hạn chế rất nhiều, vì trong quá khứ, các trang ác đã lạm dụng chúng.

Ví dụ: hãy xem mã này:

Khi người dùng cố gắng chuyển ra khỏi cửa sổ ( window.onblur ), nó sẽ đưa cửa sổ trở lại tiêu điểm. Mục đích là “khóa” người dùng trong cửa sổ .

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.

Ví dụ: trình duyệt trên điện thoại di động thường bỏ qua hoàn toàn window.focus () . Ngoài ra, tính năng lấy nét không hoạt động khi cửa sổ bật lên mở ra trong một tab riêng biệt thay vì một cửa sổ mới.

Tuy nhiên, có một số trường hợp sử dụng khi các lệnh gọi như vậy hoạt động hiệu quả và có thể hữu ích.

Ví dụ:

  • Khi chúng tôi mở một cửa sổ bật lên, bạn nên chạy newWindow.focus () trên đó. Đề phòng 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.
  • 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 chúng tôi, chúng tôi có thể theo dõi window.onfocus / onblur . Đ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 mờ có nghĩa là khách truy cập đã chuyển ra khỏi cửa sổ, nhưng họ vẫn có thể quan sát được. Cửa sổ ở chế độ nền nhưng vẫn có thể hiển thị.

Cửa sổ bật lên hiếm khi được sử dụng, vì có nhiều 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ở cửa sổ bật lên, thì một phương pháp hay là thông báo cho người dùng về cửa sổ đó. Biểu tượng “cửa sổ đang mở” gần một liên kết hoặc nút sẽ cho phép khách truy cập sống sót qua sự thay đổi tiêu điểm và lưu ý cả hai cửa sổ.

  • Một cửa sổ bật lên có thể được mở bằng lệnh gọi open (url, name, params) . Nó trả về tham chiếu đến cửa sổ mới mở.
  • Trình duyệt chặn các cuộc gọi open từ mã bên ngoài các 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ọ.
  • Theo mặc định, trình duyệt mở một tab mới, 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 window.opener .
  • 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 .
Xem Thêm  Java - Trừu tượng - ví dụ trừu tượng trong java

Để đóng cửa sổ bật lên: sử dụng lệnh gọi close () . 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). Sau đó window.closed true .

  • Các phương thức focus () blur () cho phép lấy nét / bỏ tập trung một cửa sổ. Nhưng không phải lúc nào chúng cũng hoạt động.
  • Sự kiện focus blur cho phép theo dõi chuyển đổi ra vào cửa sổ. Nhưng xin lưu ý rằng cửa sổ có thể vẫn hiển thị ngay cả ở trạng thái nền, sau khi mờ .


Xem thêm những thông tin liên quan đến chủ đề javascript mở cửa sổ bật lên

Create a Modal (Popup) with HTML/CSS and JavaScript

  • Tác giả: Florin Pop
  • Ngày đăng: 2020-04-17
  • Đánh giá: 4 ⭐ ( 5237 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial we’re going to learn how to build a Modal / Popup using HTML, CSS and a little bit of JavaScript to toggle a class.


    Support my channel:
    💜 Become a Popper and receive special Perks: http://youtube.com/florinpop/join
    💜 Donate via PayPal: https://paypal.me/florinpop17
    💜 Donate via StreamLabs: https://streamlabs.com/florinpop2/
    💜 Become a patron: https://www.patreon.com/florinpop17
    Thank you! 🙏


    👨‍👩‍👧‍👦 Join the Discord family: https://discord.gg/qSse3Ey


    Follow me on:
    📃 Website/Blog: https://florin-pop.com
    👉 Twitter: https://twitter.com/florinpop1705
    👉 Linkedin: https://linkedin.com/in/florinpop17
    👉 Instagram: https://instagram.com/florinpop17
    👉 Facebook: https://facebook.com/florinpop17
    👉 Github: https://github.com/florinpop17
    👉 Dev.to: https://dev.to/florinpop17
    👉 Twitch: https://twitch.com/florinpop17

Hàm alert() trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 7871 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ đi tìm hiểu về một hàm rất thông dụng mà bất cứ ai học JavaScript đều biết nó. Đó là hàm alert() trong JavaScript.

Framework7 – Mở & Đóng cửa sổ bật lên bằng JavaScript

  • Tác giả: isolution.pro
  • Đánh giá: 5 ⭐ ( 6181 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự miêu tả Cửa sổ bật lên cũng có thể được mở và đóng bằng JavaScript bằng cách sử dụng các phương pháp ứng dụng liên quan như được hiển thị bên dưới: myApp.popover(popover, target) – Nó được sử dụng để mở cửa sổ bật lên xung quanh phần tử đích và nó chấp nhận các đối số sau: popover-…

Tạo cửa sổ bật lên không có tệp HTML

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 3450 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi sẽ bắt đầu bài đăng này bằng cách nói: Tôi rất hiếm khi cần một cửa sổ bật lên và trên thực tế thường chỉ bao gồm một lớp phủ nội tuyến. Nhưng đôi khi tình huống xuất hiện khi tôi cần…

Hướng dẫn cách bật JavaScript trên điện thoại đơn giản, nhanh chóng

  • Tác giả: vn.got-it.ai
  • Đánh giá: 3 ⭐ ( 5996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript trên smartphone bị vô hiệu hóa thì kích hoạt thế nào? Bài viết sau sẽ hướng dẫn bạn cách bật JavaScript trên điện thoại iPhone, Android và Blackberry.

JavaScript mở trong một cửa sổ mới, không phải tab

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 3528 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cung cấp cho cửa sổ một tham số ‘thông số kỹ thuật’ với chiều rộng /…

Làm thế nào để kích hoạt JavaScript trong Windows

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 2649 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này mô tả bước cho người dùng để cho phép tất cả các trang web trong vùng Internet để chạy JavaScript trong Internet Explorer, Chrome và Firefox.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php