Hướng dẫn document open in javascript

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

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

Mẹo: Sử dụng phương thức close() để đóng cửa sổ.

Hỗ trợ trình duyệt

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

Cú pháp

window.open(URL, name, specs, replace)

Giá trị tham số

URL

Tùy chọn. Xác định URL của trang để mở. Nếu không có URL thì một cửa sổ mới/tab mới với about:blank được mở

name

Tùy chọn. Xác định tên của cửa sổ mới. Những giá trị sau được hỗ trợ:

  • _blank - URL được tải vào một cửa sổ mới hoặc tab mới. Đây là giá trị mặc định
  • _parent - URL được tải vào frame cha
  • _self - URL thay thế trang hiện tại
  • _top - URL thay thế vào bất kỳ frame nào có thể được tải
  • name - Tên của cửa số (lưu ý là name không xác định tiêu đề của cửa sổ mới)

specs

Tùy chọn. Một danh sách các mục được phân cách bằng các dấu (,), không được có khoảng trắng. Các giá trị sau được hỗ trợ:

channelmode=yes|no|1|0 Có hay không hiển thị cửa sổ ở chế độ theater. Mặc định là không, chỉ dùng cho trình duyệt IE/Edge
directories=yes|no|1|0 Không khuyến khích dùng. Có hay không thêm nút thư mục. Mặc định là có. Chỉ dùng cho IE/Edge.
fullscreen=yes|no|1|0 Có hay không hiển thị trình duyệt theo chế độ full màn hình. Mặc định là không. Chế độ full màn hình cũng phải là chế độ theater. Chỉ dùng cho IE/Edge.
height=pixels Độ cao của cửa sổ. Giá trị nhỏ nhất là 100.
left=pixels Vị trí bên trái của cửa số. Không được phép giá trị âm.
location=yes|no|1|0 Có hay không hiển thị trường địa chỉ. Chỉ dùng cho Opera.
menubar=yes|no|1|0 Có hay không hiển thị thanh menu.
resizable=yes|no|1|0 Có hay không thay đổi kích thước cửa sổ. Chỉ dùng cho IE/Edge.
scrollbars=yes|no|1|0 Có hay không hiển thị thanh cuộn. Chỉ dùng cho IE, Firefox và Opera.
status=yes|no|1|0 Có hay không thêm thanh trạng thái.
titlebar=yes|no|1|0 Có hay không hiển thị thanh tiêu đề. Bị bỏ qua trừ khi ứng dụng gọi là HTML Application hoặc một hộp thoại.
toolbar=yes|no|1|0 Có hay không hiển thị thanh công cụ trình duyệt. Chỉ dùng cho IE và Firefox
top=pixels Vị trí trên của cửa sổ. Không được phép giá trị âm.
width=pixels Chiều rộng của cửa sổ. Giá trị tối thiểu là 100

replace

Tùy chọn. Dùng để xác định xem URL có tạo đầu vào mới thay thế đầu vào hiện tại trong danh sách lịch sử hay không. Những giá trị sau được hỗ trợ:

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

Chi tiết kỹ thuật

Giá trị trả về: Tham chiếu đến cửa sổ mới được tạo hoặc null nếu lời gọi không thành công.

 Các ví dụ

Ví dụ sau mở một trang trắng ở một cửa số hoặc tab mới:

<!DOCTYPE html>
<html>
<body>
  <p>Click the button to open an about:blank page in a new browser window that is 200px wide and 100px tall.</p>

  <button onclick="myFunction()">Try it</button>
  
  <script>
    function myFunction() {
      var myWindow = window.open("", "", "width=200,height=100");
  }
  </script>

</body>
</html>

Ví dụ sau mở một cửa số mới có tên MsgWindow và viết một số văn bản vào đó:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open a new window called "MsgWindow" with some text.</p>

<button onclick="myFunction()">Try it</button>

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

</body>
</html>

Ví dụ sau thay thế cửa sổ hiện tại bằng một cửa sổ mới:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to put the new window in the current window.</p>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction() {
    var myWindow = window.open("", "_self");
    myWindow.document.write("<p>I replaced the current window.</p>");
  }
</script>

</body>
</html>

Ví dụ sau mở một cửa sổ mới và kiểm soát giao diện của nó:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open a new window with some specifications.</p>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction() {
    window.open("https://v1study.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
  }
</script>

</body>
</html>

Ví dụ sau mở nhiều cửa sổ cùng lúc:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open multiple tabs.</p>

<button onclick="myFunction()">Open Windows</button>

<script>
  function myFunction() {
    window.open("https://v1study.com/");
    window.open("https://v1mart.com/");
  }
</script>

</body>
</html>

Ví dụ sau mở một cửa sổ mới, sau đó dùng close() để đóng nó:

<!DOCTYPE html>
<html>
<body>

<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>

<script>
  var myWindow;
  
  function openWin() {
    myWindow = window.open("", "myWindow", "width=200,height=100");
    myWindow.document.write("<p>This is 'myWindow'</p>");
  }
  
  function closeWin() {
    myWindow.close();
  }
</script>

</body>
</html>

Ví dụ sau mở một cửa sổ mới, dùng thuộc tính name để trả về tên của nó:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a window and then display the name of the new window.</p>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction() {
    var myWindow = window.open("", "MsgWindow", "width=200,height=100");
    myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");
  }
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<p>Click the button to write some text in the new window and the source (parent) window.</p>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction() {
    var myWindow = window.open("", "myWindow", "width=200,height=100");
    myWindow.document.write("<p>This is 'myWindow'</p>");
    myWindow.opener.document.write("<p>This is the source window!</p>");
  }
</script>

</body>
</html>