Làm thế nào để chuyển hướng một trang web. CSS-Thủ thuật – chuyển hướng trang web html

Chuyển hướng là khi một trang web được truy cập tại một URL nhất định, nó sẽ thay đổi thành một URL khác. Ví dụ: một người truy cập “website.com/page-a” trong trình duyệt của họ

Bạn đang xem: chuyển hướng trang web html

Chuyển hướng là khi một trang web trang được truy cập tại một URL nhất định, nó thay đổi thành một URL khác. Ví dụ: một người truy cập “website.com/page-a” trong trình duyệt của họ và thay vào đó họ được chuyển hướng đến “website.com/page-b”. Điều này rất hữu ích nếu chúng ta muốn chuyển hướng một trang nhất định đến một vị trí mới, thay đổi cấu trúc URL của một trang web, xóa “www.” một phần của URL hoặc thậm chí chuyển hướng người dùng hoàn toàn đến một trang web khác (chỉ để đặt tên cho một số trang).

Giả sử chúng tôi vừa chuyển trang web của mình và chúng tôi muốn đóng trang web cũ. Tuy nhiên, chúng tôi không muốn tất cả các trang đó từ trang web cũ có thông báo 404 Không tìm thấy đáng sợ. Những gì chúng tôi cần là các liên kết cũ đó chuyển hướng đến cùng một nội dung trên trang web mới của chúng tôi.

Đây là ví dụ của chúng tôi: chúng tôi muốn old-website.com/blog/post chuyển hướng đến new-website.com/blog/post , cùng với tất cả các trang khác các bài đăng sử dụng cùng định dạng URL đó. Ngoài ra, sẽ rất tuyệt nếu các chuyển hướng của chúng tôi báo cáo với các công cụ tìm kiếm rằng thay đổi này là vĩnh viễn, vì vậy chúng nên cập nhật cho phù hợp.

Vì vậy, làm thế nào để chúng tôi điều đó? Chà, trước khi bắt đầu, chúng ta cần tìm hiểu một chút về HTTP.

Mã phản hồi HTTP

Mỗi khi chúng tôi nhập URL hoặc yêu cầu từ trình duyệt, chúng tôi đang sử dụng Giao thức truyền siêu văn bản (HTTP). Mặc dù điều này nghe có vẻ là một cái tên thực sự hấp dẫn đối với một bộ phim cảnh sát khoa học viễn tưởng, nhưng thực chất đây là quá trình chúng tôi yêu cầu các nội dung như CSS, HTML và hình ảnh từ một máy chủ. Sau khi chúng tôi gửi yêu cầu, những nội dung này sẽ đưa ra phản hồi như “này, tôi ở đây, bắt đầu!” (mã phản hồi HTTP 200 OK ). Có nhiều loại mã phản hồi HTTP khác nhau, mã phản hồi quen thuộc nhất có lẽ là 404 Not Found ; các trang web có thể phản hồi với trạng thái 404 nhưng bất kỳ nội dung nào khác mà chúng tôi yêu cầu cũng vậy, cho dù đó là hình ảnh hay bất kỳ loại nội dung nào khác.

Mọi phản hồi HTTP đều được phân loại theo một số ba chữ số nhất định, do đó, 404 Không tìm thấy là mã trạng thái 4XX để làm rõ rằng đó là lỗi ứng dụng khách và 200 nằm trong danh mục 2XX để biểu thị rằng đó là thông điệp thành công của một số loại. Chúng tôi quan tâm đến loại phản hồi HTTP 3XX, như 301 Di chuyển vĩnh viễn hoặc Đã tìm thấy 302 , bởi vì đây là những mã trạng thái được dành riêng cho chuyển hướng. Tùy thuộc vào phương pháp chúng tôi chọn, chúng tôi không nhất thiết phải biết về những mã này nhưng nó rất cần thiết cho những người khác.

Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng chuyển hướng 301 vì một số trình duyệt web hoặc máy chủ proxy sẽ lưu loại này vào bộ nhớ cache, khiến trang cũ không thể truy cập được, trong trường hợp này, đó chính là điều chúng tôi muốn.

Vậy chúng tôi thực sự bắt đầu chuyển hướng một trang web như thế nào?

chuyển hướng HTML

Có lẽ cách đơn giản nhất để chuyển hướng đến một URL khác là sử dụng thẻ Meta Refresh. Chúng tôi có thể đặt thẻ meta này bên trong & lt; head & gt; ở đầu bất kỳ trang HTML nào như sau:

  & lt; meta http-equiv = "refresh" content = "0; URL = 'http: //new-website.com'" / & gt;  

Thuộc tính content là thời gian trễ trước khi trình duyệt chuyển hướng đến trang mới, vì vậy ở đây chúng tôi đã đặt nó thành 0 giây. Lưu ý rằng chúng ta không cần đặt mã trạng thái HTTP, nhưng điều quan trọng là phải kiểm tra kỹ cách mở và đóng kỳ lạ của các dấu ngoặc kép ở trên (có các dấu ngoặc kép trong dấu ngoặc kép, vì vậy chúng cần phải khác loại và phù hợp).

Xem Thêm  Thiết kế nút cuộn xuống và hoạt ảnh với HTML và CSS - cuộn xuống mã html

Mặc dù phương pháp này là cách dễ nhất để chuyển hướng đến một trang web nhưng có một số nhược điểm. Theo W3C, có một số trình duyệt không hài lòng với thẻ làm mới Meta. Người dùng có thể thấy đèn flash khi trang A được tải trước khi được chuyển hướng đến trang B. Nó cũng vô hiệu hóa nút quay lại trên các trình duyệt cũ hơn. Đó không phải là một giải pháp lý tưởng và không được khuyến khích sử dụng.

Một tùy chọn an toàn hơn có thể là chuyển hướng trang web bằng JavaScript.

chuyển hướng JavaScript

Chuyển hướng đến một URL khác bằng JavaScript khá dễ dàng, chúng tôi chỉ cần thay đổi thuộc tính location trên đối tượng window :

  window.location = "http://new-website.com";  

Tuy nhiên, JavaScript khá kỳ lạ, có RẤT NHIỀU cách để làm điều này.

 window.location = "http://new-website.com";
window.location.href = "http://new-website.com";
window.location.assign ("http://new-website.com");
window.location.replace ("http://new-website.com");  

Chưa kể bạn chỉ có thể sử dụng location vì đối tượng window được ngụ ý. Hoặc self hoặc top .

Với đối tượng location , chúng ta có thể thực hiện nhiều việc khác như tải lại trang hoặc thay đổi đường dẫn và nguồn gốc của URL.

Có một số vấn đề ở đây:

  1. JavaScript cần được bật và tải xuống / thực thi thì JavaScript mới hoạt động được.
  2. Không rõ các công cụ tìm kiếm phản ứng như thế nào với điều này.
  3. Không có mã trạng thái nào liên quan, vì vậy bạn không thể dựa vào thông tin về chuyển hướng.

Những gì chúng tôi cần là một giải pháp phía máy chủ để giúp chúng tôi bằng cách gửi 301 câu trả lời tới các công cụ tìm kiếm và trình duyệt.

Chuyển hướng Apache

Có lẽ phương pháp phổ biến nhất để chuyển hướng một trang web là thông qua việc thêm các quy tắc cụ thể vào `.htaccess` trên máy chủ web Apache. Sau đó, chúng tôi có thể để máy chủ giải quyết mọi thứ.

`.htaccess` là tài liệu cung cấp cho chúng tôi khả năng đưa ra lệnh cho Apache, phần mềm chạy trên máy chủ. Để chuyển hướng người dùng đến trang web mới của chúng tôi, chúng tôi sẽ tạo tệp .htaccess mới (hoặc chỉnh sửa tệp hiện có) và thêm tệp đó vào thư mục gốc của trang web cũ. Đây là quy tắc chúng tôi sẽ thêm:

  Chuyển hướng 301 / http://www.new-website.com  

Bất kỳ trang nào mà người dùng truy cập trên trang web cũ giờ đây sẽ được chuyển hướng đến trang mới. Như bạn có thể thấy, chúng tôi đặt mã phản hồi HTTP ngay đầu quy tắc chuyển hướng.

Điều đáng nói là loại chuyển hướng này chỉ hoạt động trên các máy chủ Linux có bật mod_rewrite , một mô-đun Apache cho phép chúng tôi chuyển hướng các URL được yêu cầu trên máy chủ bằng cách kiểm tra một mẫu nhất định và nếu mẫu đó được tìm thấy, nó sẽ sửa đổi yêu cầu theo một cách nào đó. Hầu hết các công ty lưu trữ đều bật tính năng này theo mặc định, nhưng bạn nên liên hệ với họ nếu có sự cố. Nếu bạn đang tìm kiếm thêm thông tin về mod_rewrite thì có hướng dẫn tuyệt vời trên tuts +. Ngoài ra còn có rất nhiều đoạn mã .htaccess ở đây trên CSS-Tricks.

Quay lại ví dụ của chúng tôi, nếu chúng tôi sử dụng mã ở trên thì người dùng sẽ truy cập “old-website.com/blog/post” và được chuyển đến “new-website.com”, mã này không thân thiện với người dùng vì họ sẽ không thấy trang thực tế mà họ đã yêu cầu. Thay vào đó, chúng tôi sẽ thêm quy tắc sau vào tệp `.htaccess` của mình để chuyển hướng tất cả các bài đăng trên blog đó đến đúng nơi:

  RedirectMatch 301 /blog(.*) http: //www.new-website.com$1  

Hoặc có lẽ chúng tôi muốn chuyển hướng các trang riêng lẻ rất cụ thể. Chúng tôi có thể thêm các quy tắc như sau:

  Chuyển hướng 301 /page.html http: //www.old-website/new-page.html  

Và nếu có lỗi, chúng tôi có thể chuyển hướng người dùng đến trang 404 của chúng tôi (có thể chứa đầy những trò chơi chữ và gif):

  & lt; IfModule mod_rewrite.c & gt;
  RewriteEngine bật
  RewriteCond% {REQUEST_FILENAME}! -F
  RewriteCond% {REQUEST_FILENAME}! -D
  Quy tắc viết lại. * 404.html [L]
& lt; / IfModule & gt;  

Trước tiên, chúng tôi kiểm tra xem chúng tôi có sẵn mô-đun mod_rewrite hay không, sau đó chúng tôi có thể bật nó lên và nếu không tìm thấy tệp hoặc thư mục, chúng tôi sẽ đưa người dùng đến trang 404 của chúng tôi. Thật đơn giản là nội dung của trang mà họ nhìn thấy sẽ từ tệp 404.html trong khi URL được yêu cầu vẫn giữ nguyên.

Xem Thêm  Java - Trừu tượng - trừu tượng trong ví dụ java

Nếu bạn không thấy thoải mái với việc lộn xộn với các tệp `.htaccess` và bạn đã cài đặt WordPress thì có một tiện ích mở rộng tiện lợi có thể giải quyết vấn đề này cho chúng tôi. < / p>

Chuyển hướng Nginx

Nếu máy chủ của bạn đang chạy Nginx làm máy chủ web, thì trong tệp `nginx.conf`, bạn có thể thêm một khối máy chủ để xử lý các yêu cầu chuyển hướng này:

  máy chủ {
  nghe 80;
  server_name old-website.com;
  trả về lược đồ 301 $: //new-website.com$request_uri;
}  

Một lần nữa, chúng tôi đang sử dụng phản hồi HTTP 301 và với biến Scheme , chúng tôi sẽ yêu cầu http: // hoặc https: // < / code> tùy thuộc vào những gì trang web gốc được sử dụng. Bạn nên xem kỹ HTML5 Boilerplate nginx.conf để biết các phương pháp hay nhất về những thứ khác liên quan đến Nginx.

Chuyển hướng lighttpd

Đối với những máy chủ chạy máy chủ web Lighttpd , bạn thực hiện chuyển hướng bằng cách nhậpMô-đun mod_redirect và sử dụng url.redirect :

  server.modules = (
  "mod_redirect"
)

$ HTTP ["host"] = ~ "^ (www \.)? Old-website.com $" {
  url.redirect = (
    "^ / (. *) $" = & gt; "http://www.new-website.com/$1",
  )
}  

chuyển hướng PHP

Với PHP, chúng ta có thể sử dụng hàm tiêu đề , khá đơn giản:

  & lt;? php
  header ('Vị trí: http://www.new-website.com');
  lối ra;
? & gt;  

Điều này phải được đặt trước bất kỳ đánh dấu hoặc nội dung nào thuộc bất kỳ loại nào khác, tuy nhiên có một vấn đề nhỏ. Theo mặc định, hàm sẽ gửi một phản hồi chuyển hướng 302 cho mọi người biết rằng nội dung chỉ được di chuyển tạm thời. Xem xét trường hợp sử dụng cụ thể của chúng tôi, chúng tôi sẽ cần chuyển vĩnh viễn các tệp sang trang web mới của mình, vì vậy chúng tôi sẽ phải thực hiện chuyển hướng 301 thay thế:

  & lt;? php
  header ('Vị trí: http://www.new-website.com/', true, 301);
  lối ra();
? & gt;  

Tham số true tùy chọn ở trên sẽ thay thế tiêu đề đã đặt trước đó và 301 ở cuối là thông số thay đổi mã phản hồi thành mã phản hồi phù hợp.

Chuyển hướng Ruby on Rails

Từ bất kỳ trình điều khiển nào trong dự án Rails , chúng tôi có thể nhanh chóng chuyển hướng đến một trang web mới với redirect_to : status tùy chọn được đặt thành : move_permosystemly . Bằng cách đó, chúng tôi ghi đè mã trạng thái 302 mặc định và thay thế nó bằng Đã chuyển vĩnh viễn:

  class WelcomeController & lt; ApplicationController
  chỉ số def
    redirect_to 'http://new-website.com',: status = & gt; : move_permermanently
  chấm dứt
kết thúc  

Trong Rails 4, có bất kỳ cách nào dễ dàng hơn để xử lý các yêu cầu này, trong đó chúng tôi có thể thêm redirect trong tệp route.rb để tự động gửi phản hồi 301:

  get "/ blog" = & gt; chuyển hướng ("http://new-website.com")  

Hoặc nếu chúng tôi muốn chuyển hướng mọi bài viết trên blog đến các bài đăng trên trang web mới, chúng tôi có thể làm như vậy bằng cách thay thế những điều trên bằng những điều sau:

  get "/ blog /: post" = & gt; chuyển hướng ("http://new-website.com/blog/%{post}")  

Chuyển hướng .NET

Trước đây, tôi chưa bao giờ viết bất cứ điều gì với .NET framework nhưng có vẻ như có tài liệu rõ ràng trên Mạng nhà phát triển của Microsoft.

Chuyển hướng Node.js

Dưới đây là một thiết lập cục bộ rất nhanh giải thích cách chuyển hướng hoạt động với Node. Đầu tiên, chúng tôi bao gồm mô-đun http và tạo một máy chủ mới, tiếp theo là phương thức .writeHead () :

  var http = request ("http");

http.createServer (function (req, res) {
  res.writeHead (301, {Vị trí: 'http://new-website.com'});
  res.end ();
}). nghe (8888);  

Nếu bạn tạo một tệp mới có tên index.js và dán mã ở trên, sau đó chạy node index.js trong dòng lệnh, bạn sẽ tìm thấy phiên bản cục bộ của trang web chuyển hướng đến new-website.com . Nhưng để chuyển hướng tất cả các bài đăng trong phần / blog , chúng tôi sẽ cần phân tích cú pháp URL từ yêu cầu bằng mô-đun url tiện dụng của Node:

  var http = request ("http");
var url = request ("url");

http.createServer (function (req, res) {
  var pathname = url.parse (req.url) .pathname;
  res.writeHead (301, {Vị trí: 'http://new-website.com/' + pathname});
  res.end ();
}). nghe (8888);  

Khi sử dụng hàm .writeHead () , chúng tôi có thể đính kèm tên đường dẫn từ yêu cầu vào cuối chuỗi URL. Bây giờ nó sẽ chuyển hướng đến cùng một đường dẫn trên trang web mới của chúng tôi. Yay cho JavaScript!

Chuyển hướng bình

Với khung công tác Flask trên đầu Python , chúng tôi có thể chỉ cần tạo một tuyến trỏ đến các trang con bằng redirect , một lần nữa 301 phải là một tùy chọn được chuyển vào cuối vì mặc định được đặt thành 302:

  @ app.route ('/ Notes / & lt; page & gt;')
def điều (trang):
  chuyển hướng trả về ("http://www.new-website.com/blog/" + trang, mã = ​​301)  

Nếu bạn biết bất kỳ thủ thuật nào khác để chuyển hướng một trang web, hãy thêm nhận xét bên dưới và tôi sẽ cập nhật bài đăng này với thông tin mới nhất.


Xem thêm những thông tin liên quan đến chủ đề chuyển hướng trang web html

Link Html - Tạo liên kết các nội dung trên website | Unitop.vn

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-10-28
  • Đánh giá: 4 ⭐ ( 4214 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng link trong html? Trong video này tôi chia sẻ cho bạn những thứ cần biết về link để giúp bạn làm chủ quá trình xây dựng website của mình.

    ------
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Cách chuyển trang trong JavaScript dân lập trình phải biết

  • Tác giả: vn.got-it.ai
  • Đánh giá: 5 ⭐ ( 3243 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn chưa biết cách chuyển trang trong JavaScript? Hãy cùng Got It tham khảo bài viết sau đây để không phải gặp khó khăn khi thực hiện điều này bạn nhé!

Tạo code chuyển hướng cho trang web bằng HTML và Javascript

  • Tác giả: www.bacsiwindows.com
  • Đánh giá: 4 ⭐ ( 8015 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 2 code chuyển hướng cho trang web bằng HTML và Javascript. Code tạo chuyển hướng cho trang web bằng HTML và Javascript

Điều hướng trang (Redirect) trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 8689 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều hướng trang (Redirect) trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Chuyển hướng HTML

  • Tác giả: www.rapidtables.org
  • Đánh giá: 3 ⭐ ( 3026 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyển hướng HTML. Mã chuyển hướng làm mới meta HTML.

Chuyển hướng trang web (redirect) bằng HTML

  • Tác giả: soho.saigonphoenix.com
  • Đánh giá: 4 ⭐ ( 4343 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm việc tại nhà và sống cuộc sống tự do. Tư vấn về nghề nghiệp và kiếm tiền. Cách làm web. Thành lập và quản lý công ty.

JS Tips: Cách chuyển hướng trang bằng Javascript

  • Tác giả: cunghocweb.com
  • Đánh giá: 5 ⭐ ( 5940 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ hướng dẫn bạn cách mà chuyển hướng cho các mục tiêu khác nhau bằng cách sử dụng Javascript, cách này có thể áp dụng trên các file html hoặc

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