【php】手机版访问手机版页面选择“电脑版”之后不回到原来的手机版页面,利用Session实现

在《【JavaScript】通过JavaScript的方式,如果手机浏览器访问PC版页面,自动跳转到手机版页面》(点击打开链接)中现实了,如果用户通过手机访问你的PC页面,自动跳转到手机版页面,但是,这其中有一个问题,如果那些手机用户看到手机版页面之后,还是需要浏览PC版页面呢?此时,他们点击“电脑版”之后,由于JS的作用,还是回把他们扔回手机版页面。

当然,你可以说是这是用户的事情,让他们的手机浏览器改改浏览标识就是了,但是,我们应该把程序写得更加友好。

此时,可以利用php,其实JSP,.NET,vbscript都一样的,因为Session对象、页面条件输出在任意网页编程语言中都有。这里拿php做例子,是因为php的编程代码简短,大家都能看懂。存一个用户要访问电脑版的Session。在PC版输出跳转到手机版页面的JS脚本之前,先判断是否有这个用户要访问电脑版的Session,如果没有,或者是0,则跳转到手机版,之所以要加一个是否为0的判断,是因为有些手机版的用户选择了“电脑版”之后又选择“手机版”,然后再选择“电脑版”,你此时的Session对象已经创建了,不能再根据为空判断来输出跳转代码。

一、基本目标

我们要做到如下的效果,在带有类似iphone3GS的浏览器的标识的情况下,用户选择什么版的页面,我们就给他们什么版本。

二、基本思想

为了你的编程更加简单,你的手机版页面应该这样布置,如果你的电脑版页面叫xx.html,那么你的手机版页面就应该叫ml_xx.html,补一个前缀或者后缀之类的什么给它,便于重定向简单。这里是补上ml_前缀。

上图是本工程的页面,其中ml_pc1.php,ml_pc2.php是手机版页面,pc1.php,pc2.php是电脑版页面,uaredirect.js是在《【JavaScript】通过JavaScript的方式,如果手机浏览器访问PC版页面,自动跳转到手机版页面》(点击打开链接)中,那个如果手机访问PC页面,自动跳手机版页面的js。ml2pc.php与pc2ml.php是我们后端的处理页面。

三、制作过程

1、pc1.php,pc2.php电脑版页面

pc2.php

正如前文叙述,因为要实现手机版访问手机版页面选择“电脑版”之后不回到原来的手机版页面这个功能,就先判断判断是否有这个用户要访问电脑版的Session,之后再交给uaredirect.js判断是否是手机浏览器,跳转到相应的手机版页面。这段代码放在页头,如果要跳转,则不用加载下面的PC页面的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--这是是判断是否要跳到手机版-->
        <?
        if(isset($_SESSION["is_ml"])){
            if($_SESSION["is_ml"]==0){
        ?>
            <script src="js/uaredirect.js" type="text/javascript"></script>
            <script>
                var url=window.location.href;
                var loc = url.substring(url.lastIndexOf('/')+1, url.length);
                uaredirect('m1_'+loc);
            </script>
        <?
            }
        }
        ?>
        <title>pc2</title>
    </head>
    <body>
        <h1>pc2</h1>
        <a href="pc1.php">pc1</a>
        <!--这里开始是页脚的代码-->
        <hr />
        <h2><a id="pc2ml">手机版</a>|电脑版</h2>
        <script>
			var url=window.location.href;
			var loc = url.substring(url.lastIndexOf('/')+1, url.length);
			document.getElementById("pc2ml").href="pc2ml.php?url="+loc;
        </script>
    </body>
</html>

之后页脚主要是利用《【JavaScript】获取当前页的URL与window.location.href》(点击打开链接)把当前页面的url藏在a内容中,给之后的pc2ml.php用来的重定向。

同时注意,pc版自身的超级链接a标签都应该与手机版页面半点关系都没有,通通都只是与电脑版的页面相连。

pc1.php的代码与pc1.php的代码基本一样,唯一的不同就是页面的中间自由发挥的部分,页头页尾的内容其实可以打包起来,用php的include语句引用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?
if(isset($_SESSION["is_ml"])){
	if($_SESSION["is_ml"]==0){
?>
<script src="js/uaredirect.js" type="text/javascript"></script>
<script>
var url=window.location.href;
var loc = url.substring(url.lastIndexOf('/')+1, url.length);
uaredirect('m1_'+loc);
</script>
<?
	}
}
?>
<title>pc1</title>
</head>

<body>
<!--以上页头的内容不改变,可以打包-->
<h1>pc1</h1>
<a href="pc2.php">pc2</a>
<hr />
<!--以下页头的内容不改变,可以打包-->
<h2><a id="pc2ml">手机版</a>|电脑版</h2>
<script>
var url=window.location.href;
var loc = url.substring(url.lastIndexOf('/')+1, url.length);
document.getElementById("pc2ml").href="pc2ml.php?url="+loc;
</script>
</body>
</html>

2、ml_pc1.php,ml_pc2.php是手机版页面

手机版的页面相当来说就没有这么判断代码了,因为手机版页面的所有超级链接都只是与手机版页面相连。仅仅是页尾的电脑版链接,跳转到ml2pc.php这个php。

这里只贴一个页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ml1</title>
</head>

<body>
<h1>ml1</h1>
<a href="ml_pc2.php">ml2</a>
<hr />
<h2>手机版|<a id="ml2pc">电脑版</a></h2>
<script>
var url=window.location.href;
var loc = url.substring(url.lastIndexOf('_')+1, url.length);
document.getElementById("ml2pc").href="ml2pc.php?url="+loc;
</script>
</body>
</html>

其中页脚“电脑版”超级链接中的href是被截取的,为当前的url中,下划线之后的的部分。

一会儿给ml2pc.php好处理。

3、最后,最关键的两个session处理页面,其实也没有什么,就是重定向与session的设置,变量的获取语句。

ml2pc.php:

<?php
$url=$_REQUEST["url"];
session_start();
$_SESSION["is_ml"]=1;
echo "<script>window.location.href='${url}'</script>";
?>

pc2ml.php:

<?php
$url=$_REQUEST["url"];
session_start();
$_SESSION["is_ml"]=0;
echo "<script>window.location.href='ml_${url}'</script>";
?>

两个页面唯一的改变就是跳转的地址与session的设置,防止有些手机版的用户选择了“电脑版”之后又选择“手机版”,然后再选择“电脑版”。

至此,整个工程完成。用户再也不用改变浏览器标识UA了。

时间: 2024-10-12 02:45:09

【php】手机版访问手机版页面选择“电脑版”之后不回到原来的手机版页面,利用Session实现的相关文章

nginx规则:自动降级,手机用户访问跳转手机版与PC版页面

工作中为满足业务需要以及保证服务的可用性,配置的一些nginx跳转规则,与公司业务相关信息已经抹去,提供出来希望对大家有帮助. 1. 当后端服务器出现异常,响应码为500 501 502 503 504,请求转发到静态降级服务器,从而保证业务不至于完全无法访问,对于浏览型且实时性要求不高的站点非常有用. app_servers:应用服务器,提供正常服务页面 shopwebstatic:静态服务器,提供定时爬取的静态页面 2.请求重试: proxy_next_upstream          

如何让网站判断是手机客户端访问,如果是跳到手机版

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>< script type="text/javascript">uaredirect("www.imiansha.com");</script>     就是上面的这段代

调试手机上网页 (断点 console timeline 选择dom)

用手机看网页,越来越多,手机app套个webview的也很多,那该如何调试手机上的页面了?比如 断点,选dom,console,控制台输出,查看内存,== 嗯,万能的的chrome和safari还是帮我们解决了这些事情 android下调试手机上的网页(断点,查看修改dom,console输出,timeline,===) ios下调试手机上的网页 遇到的一些问题 android下调试手机上的网页(断点,查看修改dom,console输出,timeline,===) 一些说明 这个方案是chrom

手机上访问angular移动项目

要实现手机访问本地开发的移动端项目,首先做到两点: 1.本地打开的项目可以使用本地ip访问 2.手机和电脑同时处于一个同一个局域网中(手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开wifi给手机连接) 如果做到以上两点,那么恭喜你,就可以直接使用电脑ip在移动端访问了. 因为现开发项目是angular + ionic项目,所以以下设置及开发均以angular项目为基础进行设置.下面先来解决第一个难题: 一.angular项目配置可同时使用localhost和本地ip访问,步骤

Android手机浏览器访问本地网络相关问题

为了测试开发的手机网站,常常需要使手机直接访问本地网络. 在这个过程中碰到几个问题,记下来供以后参考 1. 在本地主机运行apache后,使用localhost和127.0.0.1可以访问页面,但使用IP(即192.168.1.*)访问时得到403 解决:这是由于httpd.conf的安全限制导致.打开httpd.conf, 搜索127.0.0.1,注释Deny from all,增加一行Allow from 192.168.1.*.修改后的配置如下: #    # Controls who c

php判断页面是电脑登录还是手机登录

首先说最根本的解决方法: 手机访问时,会附带发送user-agent信息,这个信息里面会有手机号码信息,那么如果能取得手机号码,则可以肯定是通过手机wap访问的.但是目前 中国移动已经屏蔽了user-agent信息,所以获取不到手机号码.有关系的朋友可以联系移动公司,把wap网站服务器的ip提交给中国移动,加入白名 单后即可取得ua信息.目前中国联通可以直接取到手机号,对联通用户此方案可完美实施. 接下来说我的解决方案: 手机访问,原理是手机通过移动公司的代理服务器进行的访问.那么我们就可以理解

cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验

cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验设置设备状态栏背景颜色 StatusBar.backgroundColorByHexString('#11c1f3')://设置数值类型 StatusBar.backgroundColorByName("white"); //设置名称类型 可以去参考 StatusBar插件的js源代码,里面很多设置方法. var namedColors = {    "black

怎么将电脑里的CAD图纸传输到手机CAD看图软件中?

怎么将电脑里的CAD图纸传输到手机CAD看图软件中?在CAD行业中日常的工作就是不断地编辑CAD图纸,和对CAD图纸进行反复的进行查看,在查看图纸的时候都是借助CAD看图软件进行查看的,因为在编辑器中编辑的图纸都是dwg格式的,但是如果有的时候我们需要外出的时候,怎么将CAD图纸保存到手机CAD看图软件中?具体要怎么来进行实际呀?下面就利用迅捷CAD看图来教教大家怎么将电脑里的CAD图纸传输到手机CAD看图软件中,正在学习CAD的小伙伴们一起来看看吧! 第一步:打开您手机上面的CAD看图软件,如

将win7电脑无线网变身WiFi热点,让手机、笔记本共享上网

1.以管理员身份运行命令提示符:快捷键win+R→输入cmd→回车 2.启用并设定虚拟WiFi网卡:运行命令:netsh wlan set hostednetwork mode=allow ssid=wuminPC key=wuminWiFi此命令有三个参数,mode:是否启用虚拟WiFi网卡,改为disallow则为禁用. ssid:无线网名称,最好用英文(以wuminPC为例). key:无线网密码,八个以上字符(以wuminWiFi为例).以上三个参数可以单独使用,例如只使用mode=di