Cách mở trang mới trên nút bấm trong html

• Cách mở một trang HTML mới khi nhấp vào nút trong JavaScript
  • Phương pháp 1. Sử dụng cửa sổ. mở ra()
  • Phương pháp 2. Sử dụng JavaScript
  • Phần kết luận

Cách mở một trang HTML mới khi nhấp vào nút trong JavaScript

Có một số phương pháp để chuyển hướng hoặc mở một trang HTML mới hoặc liên kết trên sự kiện nhấp vào nút bằng JavaScript

Phương pháp 1. Sử dụng cửa sổ. mở ra()

Phương pháp này là một cách tiếp cận đơn giản để chuyển hướng người dùng đến một trang mới

	
		
	
	
		
Redirect in same page
		click me
		
Open in new page
		click me
	

Phương pháp 2. Sử dụng JavaScript

Nút đầu tiên trong tệp có trình xử lý nhấp chuột nội tuyến và nút thứ hai chỉ có bộ thuộc tính

  
    Title of the document
  
  
    
      
    
  

Đây là tệp

  
    Title of the document
  
  
    
      
    
  

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

Chúng tôi đã sử dụng tài liệu. getElementById để chọn phần tử nút

Hàm chúng ta đã truyền cho phương thức addEventListener được gọi mỗi khi nhấp vào nút

Theo tôi, việc xác định một trình xử lý nhấp chuột riêng biệt là một cách tiếp cận rõ ràng hơn nhiều

Nút đầu tiên trong tệp

  
    Title of the document
  
  
    
      
    
  

  
    Title of the document
  
  
    
      
    
  

Cửa sổ. phương thức mở tải URL đã chỉ định vào ngữ cảnh duyệt web mới hoặc hiện có

Tham số đầu tiên chúng tôi truyền cho phương thức là chuỗi URL

Đảm bảo rằng bạn thêm tiền tố vào URL bằng giao thức, e. g.

   
      Title of the document
   
   
      
         Click me
      
   

Tham số thứ hai mà phương thức

   
      Title of the document
   
   
      
         Click me
      
   

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

Bằng cách đặt

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

Về mặt kỹ thuật, người dùng có thể định cấu hình trình duyệt của họ để mở tài nguyên trong một cửa sổ mới (không phải tab) khi

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

Một tùy chọn

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

const exampleBtn = document.getElementById('example-btn');

exampleBtn.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});