同一个页面内容信息生成出两个不同的url地址。其中一个url地址要跳转到另一个页面地址。下面小编分享几个简单的网页跳转代码方案。
HTML
第一种:直接跳转到指定网址
<html> <head> <meta http-equiv="Content-Language" content="zh-CN"> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> <title>加载中...</title> <meta http-equiv="refresh" content="0.1;url=https://www.20sl.cn"> </head> <body> </body> </html>
第二种:自定义跳转后标题,且隐藏跳转后的地址
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我是标题</title> <frameset framespacing="0" border="0" rows="0" frameborder="0"> <frame name="main" src="https://www.20sl.cn" scrolling="auto" noresize></frameset> </head> <body> </body> </html>
第三种:停留在百分比页面加载完后实现自动跳转(常用于网站地址变更通知类)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>正在进入....</title> </head> <body> <form name=loading> <p align=center> <font color="#0066ff" size="2">正在进入,请稍等</font><font color="#0066ff" size="2" face="Arial">...</font> <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;"> <input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;"> <script> var bar=0 var line="||" var amount="||" count() function count(){ bar=bar+2 amount =amount + line document.loading.chart.value=amount document.loading.percent.value=bar+"%" if (bar<99) {setTimeout("count()",100);} else {window.location = "https://www.20sl.cn";} } </script> </p> </form> <p align="center"> 如果您的浏览器不支持跳转,<a style="text-decoration: none" href="https://www.20sl.cn"> <font color="#FF0000">请点这里</font></a>.</p> </body> </html>
再来个美化版:常见用于通知、跳转页、广告/友联跳转等等
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>正在跳转...</title> <style type="text/css"> body, h1, h2, p,dl,dd,dt{margin: 0;padding: 0;font: 15px/1.5 微软雅黑,tahoma,arial;} body{background:#efefef;} h1, h2, h3, h4, h5, h6 {font-size: 100%;cursor:default;} ul, ol {list-style: none outside none;} a {text-decoration: none;color:#447BC4} a:hover {text-decoration: underline;} .ip-attack{width:600px; margin:300px auto 0;} .ip-attack dl{ background:#fff; padding:30px; border-radius:5px;} .ip-attack dt{text-align:center;} .ip-attack dd{font-size:16px; color:#333; text-align:center;} .tips{text-align:center; font-size:14px; line-height:50px; color:#999;} </style> </head> <body> <div class="ip-attack"> <dl> <div style="margin-bottom:50px;" align="center"> <img src="https://ae01.alicdn.com/kf/H77e5d6d36e3e41fea601d5b5637c0165v.png" height="80" alt=""> </div> <dt style="color: green">正在跳转到 - 网民工具箱</dt> <br> <dt>页面自动<a id="href" href="https://www.toolait.cn">跳转</a> 等待时间:<b id="wait">5</b></dt> </dl> </div> <script type="text/javascript"> (function(){ var wait = document.getElementById('wait'), href = document.getElementById('href').href; var interval = setInterval(function(){ var time = --wait.innerHTML; if(time <= 0) { location.href = href; clearInterval(interval); }; }, 1000); })(); </script> </body> </html>
美化版预览:整个是居中的
第四种:直接跳转指定网址(常用于放在网站头部实现自动跳转)
<meta http-equiv="refresh" content="0; url=https://www.20sl.cn">
PHP
<?php header("HTTP/1.1 301 Moved Permanently"); header("Location: https://www.20sl.cn"); exit(); ?>
JavaScript
<script language="javascript">top.location='https://www.20sl.cn';</script>
Apache(301)
Options +FollowSymLinks RewriteEngine on RewriteRule (.*) https://www.20sl.cn$1 [R=301,L]
ASP.NET(301)
<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { HttpContext.Current.Response.StatusCode = 301; HttpContext.Current.Response.Status = "301 Moved Permanently"; HttpContext.Current.Response.AddHeader("Location", https://www.20sl.cn); } </script>
Pyton
from django import http def view(request): return http.HttpResponseRedirect('https://www.20sl.cn')