Làm cách nào để chuyển hướng một trang html sang một trang html khác?

Nếu bạn không cần sử dụng thẻ Biểu mẫu hoặc thẻ Anchor để liên kết nút Gửi đến một trang khác trong HTML thì chúng ta có thể sử dụng JavaScript cho những trường hợp như vậy. Trong JavaScript, chúng tôi thiết kế một Chức năng sẽ quản lý tất cả Dữ liệu như Đường dẫn Trang nơi chúng tôi muốn Kết nối Nút Gửi của mình. Tên hàm, Bằng cách sử dụng tên Hàm đó, chúng ta có thể gọi hàm đó trong thuộc tính HTML onClick. Cái mà chúng tôi gọi là chức năng được chỉ định và chúng tôi có thể chuyển hướng người dùng của mình từ trang này sang trang khác bằng cách nhấp vào nút Gửi

Nút JavaScript đến một trang web khác

Sử dụng Sự kiện OnClick của JavaScript, bạn có thể chuyển hướng người dùng đến một trang khác chỉ bằng một cú nhấp chuột.
Vì vậy, nếu bạn muốn thực hiện nút JavaScript sang trang khác Chuyển hướng điều.
Sau đó, sử dụng Mã dưới đây.

  
   Click ME  
 

câu hỏi thường gặp về. Cách liên kết nút gửi trong HTML

nút gửi chuyển hướng đến trang khác HTML

Để chuyển hướng người dùng đến một trang khác bằng cách sử dụng nút Gửi, chúng tôi có thể sử dụng thẻ HTML Anchor hoặc thẻ Form cho điều đó.
Trong Thẻ neo và Thẻ biểu mẫu, chúng ta cần Viết/Khai báo nút Gửi giữa Thẻ neo hoặc Thẻ biểu mẫu.
Điều này sẽ làm cho nút Gửi của chúng tôi có thể nhấp được. Và bằng cách sử dụng thuộc tính href của thẻ Anchor và Form, chúng tôi có thể Chỉ định Đường dẫn nơi chúng tôi muốn người dùng của mình chuyển hướng sau khi nhấp vào nút Gửi.
Chuyển hướng sử dụng Thẻ biểu mẫu HTML

Chuyển hướng bằng cách sử dụng Thẻ neo HTML

    
     
    
       
       Click Me  
     
    
        

cách tạo một nút hoặc một trang liên kết đến một trang khác trong HTML bằng cách sử dụng nút

Chỉ cần viết/Khai báo Nút HTML của bạn bên trong thẻ HTML Anchor. Các thẻ neo sẽ làm cho các nút HTML của chúng tôi có thể nhấp được và sau đó, bạn có thể sử dụng thuộc tính href của thẻ neo để cung cấp Đường dẫn đến nút của bạn

     
     
    
       
       Click Me  
     
    
        

cách xử lý nhiều nút gửi trong biểu mẫu HTML

Trong Biểu mẫu HTML, tất cả các Nút bên trong Thẻ biểu mẫu sẽ hoạt động giống như nút Gửi. Điều này sẽ chuyển hướng người dùng đến cùng một trang (mà chúng tôi đã khai báo bên trong thuộc tính hành động của biểu mẫu HTML) Nếu bạn muốn Xử lý nhiều nút Gửi thì bạn có thể sử dụng thẻ Nhiều biểu mẫu với nhiều Đường dẫn trang. hoặc bạn có thể sử dụng thẻ Anchor thay vì thẻ Form để chuyển hướng Người dùng bằng cách sử dụng nhiều nút gửi trong nút gửi liên kết HTML sang một trang khác bằng JavaScript

cửa sổ JavaScript. vị trí cho phép chúng tôi chuyển hướng người dùng của mình đến một trang khác chỉ bằng một cú nhấp chuột. Chúng tôi chỉ cần thêm một sự kiện Nhấp vào bên trong JavaScript của mình. Cái nào sẽ chạy khi người dùng Gọi Sự kiện Nhấp chuột bằng cách nhấp vào nút Gửi

a href Gửi biểu mẫu onclick

Có, bạn có thể Liên kết/Mở một trang khác bằng cách sử dụng Thẻ neo HTML/Phương pháp Href. Để làm được điều đó, bạn phải cung cấp thuộc tính Liên kết của trang khác bên trong thẻ Anchor href. Điều này sẽ mở trang được liên kết của bạn trên một lần nhấp

  
    
     
    
       
       Click Me 
     
    
    
    
  

chuyển hướng đến một trang khác sau khi gửi biểu mẫu HTML

Nếu bạn muốn chuyển hướng đến một trang khác sau khi gửi biểu mẫu html, thì bạn phải cung cấp/Ký tên vào đường dẫn Trang khác bên trong Thuộc tính ACTION của thẻ Biểu mẫu HTML. Cái nào sẽ POST/Gửi dữ liệu Biểu mẫu của bạn đến Vị trí đó và Mở/Chuyển hướng người dùng của bạn đến Trang web đã cho đó

Cách dễ nhất để người dùng của bạn tự động chuyển hướng từ URL cũ sang URL mới là sử dụng Chuyển hướng HTML. Cho dù bạn đã thay đổi tên miền, cơ cấu lại trang web của mình hay chỉ đơn giản là tổ chức lại một số trang web của mình, việc tránh lỗi 404 Page-Not-Found đáng sợ là điều tối quan trọng

Bất kể lý do thay đổi trang web của bạn là gì, trong hướng dẫn Chuyển hướng HTML này, chúng tôi sẽ chỉ cho bạn thông qua các ví dụ đơn giản về cách nâng cao trang web của bạn một cách tự tin, đồng thời bảo vệ trải nghiệm người dùng và SEO mà bạn đã xây dựng theo thời gian

Hãy đi sâu vào

Mục lục

Giới thiệu về chuyển hướng HTML

Chuyển hướng HTML là một trong ba kỹ thuật cung cấp hướng dẫn cho trình duyệt web của khách truy cập để tự động đưa người dùng của bạn từ URL họ đã nhập vào trình duyệt của họ đến URL nơi nội dung của bạn hiện đang nằm. Bằng cách này, bạn có thể gỡ bỏ một trang HTML cũ và đưa người dùng đến một trang HTML hoàn toàn mới

Cách viết mã chuyển hướng HTML

Các trang web hiện đại có tệp HTML có cấu trúc chính thức, thường được gọi là chỉ mục. html, đóng vai trò là điểm vào chính cho trang web của bạn. Khi đó, trang web của bạn sẽ có từ 0 đến nhiều trang web ít trang trọng hơn, các đoạn HTML hoặc các thành phần trả về HTML thay đổi tùy thuộc vào việc bạn đang sử dụng không có JavaScript (JS), vanilla JS hay một trong nhiều thư viện hoặc khung JS rất phổ biến . Ở dạng đơn giản nhất, cấu trúc HTML bao gồm ba thẻ HTML. html, phần đầu và phần thân

Chuyển hướng HTML được mã hóa bằng thẻ

Giải thích cú pháp chuyển hướng HTML

Chuyển hướng HTML, đôi khi được gọi là chuyển hướng meta hoặc làm mới meta, có hai thuộc tính chứa ba phần thông tin quan trọng đối với trình duyệt web

Thuộc tính đầu tiên là http-equiv. Đối với chuyển hướng HTML, giá trị của nó được đặt thành “làm mới”. Vì các trình duyệt hoạt động trong chu trình Phản hồi-Yêu cầu HTTP, nên thuộc tính này cung cấp thông tin cho trình duyệt “tương đương” với thông tin có thể tìm thấy trong tiêu đề HTTP có tên tương tự.

Thuộc tính thứ hai là nội dung có hai giá trị. Cú pháp của nó có vẻ hơi kỳ quặc nên điều quan trọng cần lưu ý là bạn có hai giá trị bên trong một tập hợp các dấu ngoặc kép duy nhất được phân tách bằng dấu hai chấm (“thời gian trễ; new_url”)

Ví dụ cú pháp chuyển hướng HTML

Trong mã bên dưới, trình duyệt chuyển hướng đến URL được cung cấp (https. //thí dụ. com) sau khi trễ 3 giây

Nếu bạn thay đổi giá trị đầu tiên trong nội dung thành 0, trang sẽ ngay lập tức chuyển hướng. Nếu bạn thay đổi giá trị thành 10, trình duyệt sẽ đợi 10 giây trước khi chuyển đến URL mới (trong trường hợp này là ví dụ về trang web. com). Luôn đặt giá trị này thành 0 để tuân thủ khả năng truy cập trừ khi bạn có trường hợp sử dụng mạnh mẽ để không. Nếu bạn cần giới thiệu độ trễ, thì điều quan trọng là phải luôn quan tâm đến người dùng. Độ trễ quá ngắn có thể gây khó chịu trong khi độ trễ dài hơn có thể đi kèm với liên kết “nhấp vào đây” cho phép người dùng thực hiện chuyển hướng theo cách thủ công. Điều này có thể dễ dàng thực hiện trong phần 

  
   Click ME  
 

0

Mã trạng thái HTTP cần thiết

HTTP là gì?

HTTP là từ viết tắt của Hyper Text Transfer Protocol. Nói một cách đơn giản, các công nghệ web giao tiếp bằng chu trình Yêu cầu/Phản hồi HTTP

Tại sao điều này lại quan trọng đối với chuyển hướng?

Khi làm việc với các công nghệ web, bạn nên biết ý nghĩa của ít nhất một vài trong số nhiều Mã trạng thái HTTP được trả về khi người dùng nhập URL vào trình duyệt hoặc trong trường hợp của chúng tôi là chuyển hướng một URL của trang web sang một trang web khác

Mã trạng thái HTTP cần thiết cho chuyển hướng

Mã trạng thái HTTP chứa ba chữ số với số đầu tiên cho biết loại phản hồi (1xx – 5xx). Trong khối này, có nhiều mã mà bạn có thể tìm hiểu theo thời gian. Nếu chúng tôi bỏ qua các mã thời điểm bắt đầu bằng 1 (thông tin) và các mã bắt đầu bằng 5 (phía máy chủ) thì có một tập hợp con nhỏ các mã còn lại cần thiết để chuyển hướng

• 200 – thành công
• 301 – chuyển hướng vĩnh viễn
• 302 – chuyển hướng tạm thời
• Lôi 404 Không Tim Được Trang

Mục tiêu của chúng tôi khi chuyển hướng là nhận được 200 (trang web của chúng tôi được tải thành công) và tránh 404 (không thể tìm thấy trang web của chúng tôi). Nếu nội dung của chúng tôi đã được di chuyển vĩnh viễn, chúng tôi muốn chiến lược chuyển hướng của mình gửi cho trình duyệt mã trạng thái 301 (được gọi là chuyển hướng vĩnh viễn). Nếu nội dung của chúng tôi chỉ tạm thời nằm ở một vị trí khác, chúng tôi muốn chiến lược chuyển hướng của mình gửi cho trình duyệt mã trạng thái 302 (được gọi là chuyển hướng tạm thời)

Ví dụ trang web chuyển hướng meta HTML

Chuyển hướng HTML thực sự khá đơn giản và được minh họa rõ nhất bằng một ví dụ. Trong đoạn mã đầu tiên, chúng tôi thêm thẻ làm mới meta chuyển hướng khách truy cập đến URL mới của chúng tôi sau 3 giây trì hoãn

  
   Click ME  
 

1

Lưu ý Mã trạng thái HTTP là 200 trong tab Mạng của trình duyệt cho biết trang web cũ của chúng tôi đã tải thành công. Sau 3 giây trì hoãn mà chúng tôi đã mã hóa, trang web mới được tải

  
   Click ME  
 

2

Lưu ý hai Mã trạng thái HTTP cho trang web mới của chúng tôi. Mã 301 cho biết chuyển hướng thành công trong khi mã 200 cho biết trang web mới của chúng tôi đã được tải thành công

Các phương pháp thay thế để thực hiện chuyển hướng

Mặc dù chuyển hướng HTML có thể là cách dễ nhất để thực hiện chuyển hướng, nhưng đó không phải là cách duy nhất hoặc thậm chí là tốt nhất. Như chúng tôi đã đề cập trong phần mở đầu “Giới thiệu về chuyển hướng HTML”, có hai cách khác để xác định chuyển hướng. Hai phương pháp khác là

1. Chuyển hướng HTTP
2. Chuyển hướng JavaScript

Chuyển hướng HTTP

Chuyển hướng HTTP (còn được gọi là chuyển hướng 301, chuyển tiếp URL hoặc chuyển hướng URL) được thực hiện phía máy chủ và là cách mạnh mẽ và đáng tin cậy nhất để đảm bảo rằng người dùng và công cụ tìm kiếm được chuyển hướng đến vị trí nội dung mới của bạn mà không làm giảm lưu lượng truy cập hoặc SEO

Để biết hướng dẫn của Google về cách sử dụng chuyển hướng 301 trong đó SEO là yếu tố quan trọng cần cân nhắc, bạn có thể xem video này từ kênh YouTube của Trung tâm Google Tìm kiếm

Lưu ý quan trọng. Trong trường hợp nội dung của bạn tạm thời ở một vị trí mới, điều quan trọng là sử dụng 302 (chuyển hướng tạm thời) thay vì 301 (chuyển hướng vĩnh viễn)

Mặc dù tất cả các khái niệm mà chúng tôi đã thảo luận trong bài viết này đều áp dụng được, nhưng khi nói đến chuyển hướng HTTP, có rất nhiều sự kết hợp giữa các công nghệ, dịch vụ lưu trữ và nhà cung cấp tên miền. Cách tốt nhất của bạn là tìm kiếm “chuyển hướng 301”, sau đó là “công nghệ của bạn”.

Chuyển hướng JavaScript

Chuyển hướng JavaScript cung cấp một tùy chọn đơn giản khác để tự động đưa người dùng của bạn từ URL họ đã nhập vào trình duyệt của họ đến URL nơi nội dung của bạn hiện đang nằm. Thoạt nhìn, JavaScript cung cấp rất nhiều lợi ích thú vị để kích hoạt chuyển hướng. Hãy cùng khám phá cách JavaScript bằng cách phản chiếu các kết quả mà chúng tôi đã đạt được ở trên bằng kỹ thuật chuyển hướng HTML

Trong mã bên dưới, trình duyệt chuyển hướng đến URL được cung cấp (https. //thí dụ. com) ngay lập tức

  
   Click ME  
 

3
Sau đây là các kỹ thuật khác mà bạn có thể sử dụng để đạt được kết quả tương tự.
______14

  
   Click ME  
 

5
Trong mã bên dưới, trình duyệt chuyển hướng đến URL được cung cấp (https. //thí dụ. com) ngay như trên. Sự khác biệt so với việc sử dụng phương thức assign() là sau khi sử dụng replace() the current page is not saved in history which simply means the user cannot navigate back to the original page using the browser’s back button.

  
   Click ME  
 

6
Một điều thú vị khác khi sử dụng JavaScript là bạn có thể làm cho URL động, cập nhật URL để phản hồi các sự kiện và về cơ bản cung cấp bất kỳ logic lập trình nào để xác định .

0
Trong phần chuyển hướng HTML ở trên, chúng tôi cũng đã chỉ ra cách bạn có thể đưa ra độ trễ khi chuyển hướng đến một URL mới. Điều này cũng có thể dễ dàng thực hiện trong JavaScript bằng cách sử dụng hàm setTimeout()  . Trong mã bên dưới, trình duyệt chuyển hướng đến URL được cung cấp (https. //thí dụ. com) sau khi trễ 3 giây.
______81

Tài nguyên học tập

Tìm hiểu thêm về các chi tiết Chuyển hướng HTML, JavaScript và HTTP từ tài liệu Mạng nhà phát triển Mozilla và từ bài viết sâu sắc này từ Thủ thuật CSS

Tiếp tục quá trình học HTML của bạn với khóa học HTML & CSS 101 – Cơ bản về phát triển web miễn phí này hoặc nâng kỹ năng của bạn lên một tầm cao mới chỉ trong hơn một giờ với KHÓA HỌC HOÀN THÀNH miễn phí này – Tìm hiểu HTML và CSS trong 80 PHÚT. Bạn cũng có thể cân nhắc dùng thử Hướng dẫn HTML dành cho người mới bắt đầu từ Lập trình với Mosh này hoặc quyết định nắm vững nền tảng của tất cả quá trình phát triển web với Bằng cấp nhỏ về Phát triển Web Full-Stack cao cấp này

Sự kết luận

Có nhiều lý do khiến bạn có thể muốn cung cấp tính năng chuyển hướng URL và đưa mọi người đến một trang khác – bao gồm việc chuyển đổi liền mạch sang một miền mới, cơ cấu lại trang web hiện tại của bạn, hướng khách truy cập đến một phiên bản an toàn của trang web của bạn (từ http. //thí dụ. đến https. //thí dụ. com), cho phép mọi người truy cập trang web của bạn từ nhiều tên miền (hiện có hơn 1000 phần mở rộng tên miền và nó vẫn đang phát triển) và nhiều trường hợp khác

Bất kể lý do của bạn là gì, đảm bảo rằng người dùng và công cụ tìm kiếm được hướng đến nội dung mới của bạn, duy trì các liên kết ngược của các trang web khác đến nội dung của bạn, dấu trang của người dùng và tất nhiên, không làm giảm lưu lượng truy cập hoặc xếp hạng trang SEO khiến nhận thức về chủ đề này trở nên cần thiết trong ngày hôm nay . Hãy nghĩ xem bạn đã thất vọng bao nhiêu lần khi cố gắng truy cập một trang HTML cũ không còn tồn tại nữa

Trong bài viết này, chúng tôi tập trung vào kỹ thuật đơn giản nhất trong ba kỹ thuật, chuyển hướng HTML và thảo luận ngắn gọn về hai kỹ thuật còn lại (HTTP và JavaScript). Mặc dù chuyển hướng HTML là một giải pháp đơn giản và JavaScript cung cấp trải nghiệm mạnh mẽ cho nhà phát triển, nhưng điều quan trọng là phải ghi nhớ mục tiêu cuối cùng của bạn khi quyết định thực hiện phương pháp nào. Cách tốt nhất của một trang web để gửi ai đó đến một trang khác có thể không phù hợp với bạn

Với kiến ​​thức nền tảng này, bạn có thể tự tin nâng cao trang web của mình bằng cách tìm và thực hiện các bước phù hợp với yêu cầu và công nghệ của bạn để đảm bảo mọi người tiếp tục tìm thấy bạn và nội dung có giá trị của bạn

Làm cách nào để chuyển hướng trang HTML sang trang HTML khác bằng nút?

Làm cách nào để chuyển hướng từ một trang HTML này sang một trang HTML khác bằng JavaScript?