页面自动跳转实现方法

读书笔记•2018-07-31•人生经验• 2035• 0•A⁺ A^-

自动转向，也叫自动重定向。自动跳转，指当访问用户登陆到某网站时，自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页，也可以是其它网站。通常情况下，浏览器会收到一个网页，该页面含有自动加载一其它网页的代码。该页面有可能在服务器端被转换，这样的话，浏览器只收到一个页面，而自动转向往往意味着浏览器收到的页面具有自动将访问用户送至其它页面的功能。对自动转向技术的合理应用包括：将用户转向到指定浏览器的网页版本；当网站的域名变更或删除后将人们转向到新域名下，等等。但现在这种技术却往往被搜索引擎优化人士用来作为提高网站的搜索引擎排名的一种手段。例如，先专门针对搜索引擎做一个高度优化的网页，也就是我们通常所说的“桥页”，然后把这个网页提交给搜索引擎来获得好的排名。但是，当搜索用户通过搜索引擎的搜索结果列表点击该网页列表进入后，将被自动转向到一个用户本来无意去访问的网站地址。搜索引擎常常认为自动转向的网页是对读者的误导，所以它会对这种网页或网站施以惩戒，不过对一些自动转向方法它目前还无法自动检测出来。Meta Refresh Tag自动转向法由于搜索引擎能够读取HTML，而Meta&nbsptags也是HTML，所以对于这种自动转向法，搜索引擎能够自动检测出来。因而无论网站的转向出于什么目的，都很容易被搜索引擎视做对读者的误导而受到惩罚。不过，如果跳转延迟时间设置合适，搜索引擎就不会视之为作弊。页面定时刷新元标识(Meta Refresh Tag)只能放在HTML代码的<HEAD>区里。如下所示：

代码

以下是代码片段：<meta http-equiv="refresh" content="5" url=http://www.zz-world.com/forums/">

其中的“5”是告诉浏览器在页面加载5秒钟后自动跳转到page.htm这个页面。这种方法常可以在论坛中见到。如果在论坛上发信息，先会看到一个确认页面，几秒后会自动重新跳转回当前的论坛页面中。从搜索引擎优化的角度出发，一般不希望自动转向有延迟。不过，如果是用Meta Refresh标识进行转向，一定要注意把延迟时间设定成至少10秒以上。“javascript”自动转向法 由于不能解析javascript，所以搜索引擎无法察觉(自动检测到)用javascript脚本进行的自动转向。javascript自动重定向脚本可以放在网页的任何位置上，如果要求立即跳转，则可以将其放入网页源码的<head>区内的最上面。用javascript实现跳转的范例如下：方案1：

代码

以下是代码片段：<script LANGUAGE="JavaScript">  </script>

方案2：

代码

以下是代码片段：<script language="javascript">  </script>

其中的“ https://solidot.org " 和 " https://www.zz-word.com "指特定的重定向目标地址，用相对/绝对URL地址均可。用javascript实现自动重定向的好处在于：用户所访问的目标URL不会保留在用户浏览器的历史记录中，如果用户按返回按钮返回，则将回到跳转前的网页，而不是包含javascript自动重定向脚本的跳转页面，所以不会出现当用户点击返回按钮后返回至重定向页，然后该页自动跳转到用户本来想离开的那个页面的尴尬情形。如果需要，可以把javascript自动重定向脚本存在一个外部文件中，并通过下面的命令行来加载，其中“filename.js”是该外部文件的路径和文件名：

代码

注意：若需实现即刻转向，或不希望人们看到转向前的那个页面，一般常用javascript脚本实现。在这种情况下应将javascript脚本放入HTML源码的<HEAD>区中。表单(FORM)自动转向法搜索引擎的“爬行”程序是不会填写表单的，所以它们也不会注意到提交表单，因而可以利用表单来实现自动转向(重定向)而不让搜索引擎察觉。对于表单，人们往往很少意识到：表单的Action参数中包含的URL地址其实正是浏览器向服务器所请求的URL。浏览器将会通过向请求的URL地址增加一些格式为name=value的参数给予它以特殊的对待。在什么都没有的情况下，浏览器仍旧会为该URL安排请求至服务器。用javascript脚本可让页面开始加载时即提交表单。下面是一个用javascript实现表单自动提交，以及提交表单的范例：

代码

以下是代码片段：<script language="javascript"> </script> <form name="myform" action="www.zz-world.com" method="get"></form>

其中“myform”可以是任意名称，“ www.zz-world.com ”用相对/绝对URL地址均可。小结如果访问用户最终看到的是他们想看到的，那么在搜索引擎优化中使用自动转向技术并没有什么不对，也并不是什么不道德的行为。但有些人往往会在利用“自动跳转”技术，利用“桥页”吸引访问者，然后把他们送到他们无意浏览的页面或网站，这种做法只会引起访问用户的反感，又怎么能够期望访问流量可以有效转化为最终客户呢?

<META http-equiv=REFRESH content=1;URL=http://www.sm160.cn> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－很多时候我们需要Web页具备有自动跳转功能，例如，论坛中的用户登录、发帖及回复或留言簿中的留言和回复等操作成功后，若用户没有任何鼠标点击操作，过了一定的时间，页面自动跳转到预设的页面。本文讨论网页自动跳转的几种实现方法。

方法一：使用meta标签

meta标签是html不可或缺的标签之一，它负责提供文档的元信息，其参数主要有：

    ① http-equiv： 与 文档中数据相关的HTTP文件首部      ② content： 与命名HTTP首部相关的数据      ③ name：  文档描述      ④ url：  与元信息相联系的URL

当我们定义属性http-equiv为refresh，打开此Web页时系统将根据content规定的值在一定时间内跳转到相应页面，content="秒数;url=网址"就是定义了过多长时间跳转到指定的网址。以下meta标签告诉系统一秒钟后页面自动跳转到黑马在线动力： <meta http-equiv="refresh" content="1;url=http://www.gxblk.com"> 以上代码需要加在HTTP文档首部中，介于<head>与</head>之间，通常，meta标签是紧跟在<head>之后。若需要有多个meta标签，它们可以各占一行。此法通用于任何环境，包含静态的网站空间。

方法二：使用header函数

header函数是PHP内置函数中的HTTP相关函数之一，该函数送出HTTP协议标头到浏览器。使用它可以重定向URL，即令页面转向其他指定的网页。以下例子，执行后将自动打开黑马在线动力首页： header("Location: http://www.gxblk.com"); 必须注意，header函数只能用在页面代码中的<html>标签之前，亦即，HTTP首部尚未有其他任何标头（<head>）传送给浏览器之前，而且，此前页面也不能print或echo任何内容。换句话说，在页面的<html>出现前，程序只单纯地处理header事件。尽管有如此严格的要求，灵活地使用它，仍然可以达成页面的自动跳转功能，比如登录页面，通过判断用户提交的数据是否合法来决定页面跳转到何处。以下给出一个简单的例子：

＜?php    /* 登录程序 - 文件名：login.php   程序作用 - 判断用户登录口令 */    if(＄_POST['Submit']) {     session_start();     if(＄_POST['pws']=='123') { //若密码为 123        ＄_SESSION['passwd']='123'; //写入会话数据        header("Location:index.php"); //跳转到正常页面     }else{        header("Location:login.php"); //跳转到登录页面     }  }    //表单代码略（也可以用纯html代码写表单，若如此，代码应放在程序之后    ?＞    ＜?php    /* 检测会话数据 - 文件名：index.php   程序作用     - 检测会话数据中的密码是否为123，若不是，返回           登录页面         */    session_start();  if(＄_SESSION['passwd']!='123') header("Location:login.php");    //其他代码（纯HTML代码应写在程序之后）    ?＞

此法显然只能用于支持php的空间环境。

方法三：使用JavaScript

JS非常灵活，利用它可以做出功能非常强大的程序脚本，这里仅举一个简单的页面自动跳转的JS例子。以下代码执行后浏览器将自动转到黑马在线动力网站，该代码可放在页面中的任何合法的位置：

＜script language="javascript" type="text/javascript"＞        window.location.href("http://www.gxblk.com");    ＜/script＞

此代码适用于任何Web环境。若加入定时器，将更加妙不可言。经常遇到页面自动跳转的问题例如在有些网站需要在退出登录时出现一个提示页面什么你正在退出只类客套话，有的还要作个倒记时方法一： <meta http-equiv="refresh" content="‘等待时间’;URL=‘跳转页面’"> 方法二：这是一个js的应用。测试代码： <input type=button value="点击开始" onClick="t=5"> <span id="view"></span> <script> t = -1; // 计数器 setInterval("testTime()",1000); // 启动1秒定时 function testTime() { if(t<0) return; // 计数器值小于0，表示尚未开始倒计时 if(t == 0) // 计数器值为0，转向 location = "https://www.sohu.com"; view.innerHTML = "<b>"+t+"</b>"; // 显示倒计时 t--; // 计数器递减 } function offTime() { if(event.srcElement.value != "点击开始") { // 若不是倒计时开始 t = -1; // 初始计数器 view.innerHTML = ""; // 清空倒计时 } } document.onclick = offTime; // 启动点击事件监视 </script>

本文标题：页面自动跳转实现方法

本文链接：http://zvvv.cn/post/531.html

作者授权：除特别说明外，本文由 Exciting 原创编译并授权读书笔记刊载发布。

☆收藏0

发表评论