博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网站开发中web页面跳转几种方式详解
阅读量:6855 次
发布时间:2019-06-26

本文共 4303 字,大约阅读时间需要 14 分钟。

hot3.png

在做web开发中,页面跳转的方式有很多种,然而有些时候这些跳转如何用到恰到好处却很容易被忽视。

客户端触发跳转有如下几种

  1. 使用meta元信息

  2.使用javascript中的window.location对象

//修改window.location.hrefwindow.location.href ='http://my.oschina.net/ososchina/blog';//替换url,注意这种方式有时并不是有效的,需要强制reload才行//window.location.replace('http://my.oschina.net/ososchina/blog');//window.location.reload(true);//修改window导航//window.navigate ('http://my.oschina.net/ososchina/blog') ;

补充一点:在html5中,利用新的api实现前端页面mvc的跳转也是一种不错的方式(注意:服务端不跳转),利用这种方式可以实现前端MVC开发

var state = { action : "page", title : "HTML 5 History API simple demo",url : "yourpage"};history.pushState(state, "HTML 5 History API simple demo", state.url);window.onpopstate = function (e) {switch (e.state.action) { case "home" :    document.title = "HOME ……";    $.get("index.php").done(function (data) { $("#wrapper").html(data); });     break;   case "page" :     document.title = e.state.title;     $.get(e.state.url).done(function (data) { $("#wrapper").html(data); });   break; }};

以上是客户端触发的跳转

-------------------------------------------------------------------------------------------

服务端触发的跳转的方式

  1. php中使用header跳转

header('Location:http://my.oschina.net/ososchina/blog'); //这里的代码忽略了搜索引擎对于链接价值的转移,它会被当做'暂时地'重定向。

推荐使用下面的方式

header('HTTP/1.1 301 Moved Permanently');//固定重定向header('Location: http://my.oschina.net/ososchina/blog');

有时,设置http 响应头是非常重要的,这些可以帮助搜索引擎和浏览器“理解”请求的状态

下面提供一种发送http响应头的php函数

/** * 发送HTTP状态 * @param integer $code 状态码 * @return void */function send_http_status($code) {    static $_status = array(            // Informational 1xx            100 => 'Continue',            101 => 'Switching Protocols',            // Success 2xx            200 => 'OK',            201 => 'Created',            202 => 'Accepted',            203 => 'Non-Authoritative Information',            204 => 'No Content',            205 => 'Reset Content',            206 => 'Partial Content',            // Redirection 3xx            300 => 'Multiple Choices',            301 => 'Moved Permanently',            302 => 'Moved Temporarily ',  // 1.1            303 => 'See Other',            304 => 'Not Modified',            305 => 'Use Proxy',            // 306 is deprecated but reserved            307 => 'Temporary Redirect',            // Client Error 4xx            400 => 'Bad Request',            401 => 'Unauthorized',            402 => 'Payment Required',            403 => 'Forbidden',            404 => 'Not Found',            405 => 'Method Not Allowed',            406 => 'Not Acceptable',            407 => 'Proxy Authentication Required',            408 => 'Request Timeout',            409 => 'Conflict',            410 => 'Gone',            411 => 'Length Required',            412 => 'Precondition Failed',            413 => 'Request Entity Too Large',            414 => 'Request-URI Too Long',            415 => 'Unsupported Media Type',            416 => 'Requested Range Not Satisfiable',            417 => 'Expectation Failed',            // Server Error 5xx            500 => 'Internal Server Error',            501 => 'Not Implemented',            502 => 'Bad Gateway',            503 => 'Service Unavailable',            504 => 'Gateway Timeout',            505 => 'HTTP Version Not Supported',            509 => 'Bandwidth Limit Exceeded'    );    if(isset($_status[$code])) {        header('HTTP/1.1 '.$code.' '.$_status[$code]);        // 确保FastCGI模式下正常        header('Status:'.$code.' '.$_status[$code]);    }}

然后我们来优化一下

send_http_status('301');//固定重定向header('Location: http://google.com/');

问题来了:这里挖掘机技术必须强,使用http响应后需要注意的是,在响应头发送之前必须没有输出流输出内容,因此,这种让人满意的方法有时并不适用;下面进行改造:

";  *echo "window.location.href ='http://my.oschina.net/ososchina/blog'";  *echo '';  */   //或下面的这种方式(推荐)  echo "
";}?>

当然有时候会出现n秒后跳转过渡页面,这个也不是很困难,但这种重定向只需默认的“临时重定向”就行,避免SEO权值转移。

";        if ($time != 0)            $str .= $msg;        exit($str);    }}?>

--------------------------------------------------------------------------------

在页面有2个红色的词语“触发”,这里的意思是通过触发事件来进行跳转的,在http请求中(http基于tcp连接),一般是 “请求-应答”模式,但这种模式是独立于页面跳转的。

实际上页面跳转分为2中方式 :客户端跳转,客户端和服务端一起跳转

客户端跳转在目前mvc主流框架中使用较为广泛,这种跳转一般通过服务端控制(Controller)触发,如j2ee servlet中的Dispatcher和forward以及php中的include,display,客户端和服务端一起跳转一般具有强制性,这个无论前端和后端均可使用,但后端使用的一个好处是可以发送状态码,对于SEO等工作具有很多好处。

转载于:https://my.oschina.net/ososchina/blog/340854

你可能感兴趣的文章
springboot gradle项目搭建随记
查看>>
day23——删除数据、更改数据、索引
查看>>
ABP官方文档翻译 6.1.2 MVC视图
查看>>
js-监听页面滚动
查看>>
半小时精通PHP正则表达式
查看>>
php一维数组转化二维数组实现数组键值替换及转化json乱码
查看>>
PHP基础2
查看>>
CefSharp.v49.0.1浏览器控件完全WPF版,实现禁止弹出新窗口,在同一窗口打开链接,并且支持带type="POST" target="_blank"的链接...
查看>>
<Android 基础(二十一)> Android 屏幕适配
查看>>
CFile与CStdioFile的区别
查看>>
LNMP的安装--详细版
查看>>
Windows 8 系列(七):使用异步API:await 和 async
查看>>
采坑“微信小程序”
查看>>
Nova官方资料入口处
查看>>
通过GeoIP2分析访问者IP获取地理位置信息
查看>>
20个大背景风格网页设计作品欣赏
查看>>
Google-Authenticator
查看>>
Android开发指南(37) —— Data Backup
查看>>
【VLC-Android】LibVLC API简介(相当于VLC的MediaPlayer)
查看>>
分享一个收集到的文件和目录操作类FileSystemObject
查看>>