在《【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了。