您的位置：首页 > 编程语言 > PHP开发

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

2015-05-13 10:15 549 查看
在《【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了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航