如何将HTML网页重定向到另一个URL？

最新推荐文章于 2024-04-21 19:48:25 发布

翻译最新推荐文章于 2024-04-21 19:48:25 发布 · 8.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.poftut.com/how-to-redirect-html-web-page-into-another-url/

标签

#css #html #javascript #js #web

本文详细介绍了多种网页重定向方法，包括HTML的meta标签重定向，JavaScript的location对象重定向，以及Apache、Nginx、Lighttpd服务器的配置重定向。还涉及了PHP、Ruby on Rails、.Net、Node.js、Flask和Golang等编程语言和框架的重定向实现。

HTML is a language used to build web pages. Web pages have a dynamic nature where it can change during time. One of the most popular change cases is redirecting a given web page to another web page. This is simply called a web page redirect. In this tutorial, we will examine the redirect process in different ways, languages, and technologies.

HTML是用于构建网页的语言。网页具有动态性质，可以随时间变化。最受欢迎的变更案例之一是将给定的网页重定向到另一个网页。这简称为网页重定向。在本教程中，我们将以不同的方式，语言和技术检查重定向过程。

HTML重定向 (HTML Redirect)

The most popular and basic for web page redirect is using HTML. HTML has two main parts named <head> and <body> . We can provide some special tags into <head> in order to redirect the HTML page. We will use <meta> tag with detailed attributes. In this example, we will redirect to https://www.poftut.com . We will use http-equiv attribute with refresh value.

网页重定向最流行和最基本的方法是使用HTML。 HTML有两个主要部分，分别名为<head>和<body> 。我们可以在<head>中提供一些特殊的标签，以便重定向HTML页面。我们将使用具有详细属性的<meta>标记。在此示例中，我们将重定向到https://www.poftut.com 。我们将使用带有refresh值的http-equiv属性。

<meta http-equiv="refresh" content="0; URL='https://poftut.com'" />

JavaScript重定向 (JavaScript Redirect)

JavaScript is a client-side technology that can make dynamic changes after or during HTML page load. JavaScript language provides window.location object which is used to get and set the current page URL.

JavaScript是一种客户端技术，可以在HTML页面加载之后或加载过程中进行动态更改。 JavaScript语言提供了window.location对象，该对象用于获取和设置当前页面的URL。

windows.location="https://www.poftut.com";

OR JavaScript provides different mechanisms to change or redirect HTML web page.

或JavaScript提供了不同的机制来更改或重定向HTML网页。

windows.location="https://www.poftut.com";

windows.location.href="https://www.poftut.com";

windows.location.assign("https://www.poftut.com");

windows.location.replace("https://www.poftut.com");

Apache重定向 (Apache Redirect)

Apache is a popular web server. We can redirect a page by using Apache on the server-side. We can use Redirect or RedirectMatch directives to redirect web pages completely or specifically.

Apache是流行的Web服务器。我们可以通过在服务器端使用Apache来重定向页面。我们可以使用Redirect或RedirectMatch指令完全或专门重定向网页。

We can redirect pages starting with /blog.

我们可以重定向以/blog开头的页面。

RedirectMatch 301 /blog(.*) https://www.poftut.com$1

Or we can redirect specific web page like page.html in the following example.

或者，在以下示例中，我们可以重定向特定的网页，如page.html 。

Redirect 301 /page.html https://www.poftut.com/new-page.html

Nginx重定向 (Nginx Redirect)

Nginx is another popular web server used to serve web pages. It can redirect web pages using return directive. This can be also used to redirect http web pages to the https versions.

Nginx是另一种用于提供网页的流行Web服务器。它可以使用return指令重定向网页。这也可以用于将http网页重定向到https版本。

server {

   listen 80;

   server_name poftut.com;

   return 301 $scheme://poftut.com$request_uri;

}

Lighttpd重定向 (Lighttpd Redirect)

Lighttpd is a web server used to server light we sites. We can use mode_redirect module and its url.redirect function to redirect HTML web pages. In this example, we will redirect http://www.poftut.com into https://www.poftut.com .

Lighttpd是一个Web服务器，用于为我们站点提供灯光。我们可以使用mode_redirect模块及其url.redirect函数来重定向HTML网页。在此示例中，我们会将http://www.poftut.com重定向到https://www.poftut.com 。

server.modules = ( "mod_redirect" ) 

$HTTP["host"] =~ "^(www\.)?poftut.com$" { 
   url.redirect = ( "^/(.*)$" => "https://www.poftut.com/$1", ) 
}

PHP重定向 (PHP Redirect)

PHP provides the HTML redirect features with header() function. Actually header() function will insert an HTML meta tag into the HTTP response. header() usage is very simple where we just provide the Location: with the URL we want to redirect.

PHP提供带有header()函数HTML重定向功能。实际上， header()函数会将HTML元标记插入HTTP响应中。 header()用法非常简单，只需在其中提供Location:和要重定向的URL。

<?php 
   header('Location: http://www.new-website.com'); 
   exit; 
?>

Ruby on Rails重定向 (Ruby on Rails Redirect)

Ruby on Rails provides ApplicationController class which can be used inherit into our class. We can use index function and put redirect_to function for redirection.

Ruby on Rails提供了ApplicationController类，可以使用该类继承到我们的类中。我们可以使用index函数，并把redirect_to函数用于重定向。

class WelcomeController < ApplicationController 
   def index 
      redirect_to 'http://poftut.com', :status => :moved_permanently 
   end 
end

.Net重定向 (.Net Redirect)

.Net provides languages like C# and Visual Basic. We can use Reponse class and its functions Redirect() and attributes Status , AddHeader.

.Net提供C＃和Visual Basic之类的语言。我们可以使用Reponse类及其函数Redirect()和属性Status ， AddHeader 。

Response.Redirect("http://www.poftut.com");

要么

Response.Status = "301 Moved Permanently"; 

Response.AddHeader("Location", "http://www.poftut.com");

要么

Response.RedirectPermanent("http://www.poftut.com")

Node.js重定向 (Node.js Redirect)

Node.js provides writeHead() function with http library. We can redirect into http with the following code.

Node.js通过http库提供了writeHead()函数。我们可以使用以下代码重定向到http 。

var http = require("http"); 

http.createServer(function(req, res) { 
   res.writeHead(301,{Location: 'http://www.poftut.com'}); 
   res.end(); 
}).listen(80);

烧瓶重定向 (Flask Redirect)

Flask is a python framework which uses app.route() and provides redirect() .

Flask是一个使用app.route()并提供redirect()的python框架。

@app.route('/notes/<page>') 
def thing(page): 
   return redirect("http://www.poftut.com/blog/" + page, code=301)

Golang重定向 (Golang Redirect)

Golang provides net/http library which provides http.HandleFunc() to handle HTTP response and using Redirect() function to write the new redirect URL.

Golang提供了net/http库，该库提供http.HandleFunc()处理HTTP响应，并使用Redirect()函数编写新的重定向URL。

package main 

import "net/http" 

func main() { 
   http.HandleFunc("/", func (wr http.ResponseWriter, req *http.Request) { 
   http.Redirect(wr, req, "http://poftut.com", http.StatusMovedPermanently) 
   }) 
}

LEARN MORE What Is index.html? How To Create and Use index.html?

了解更多什么是index.html？如何创建和使用index.html？

翻译自: https://www.poftut.com/how-to-redirect-html-web-page-into-another-url/