在《【JavaScript】通過JavaScript的方式，如果手機瀏覽器訪問PC版頁面，自動跳轉(zhuǎn)到手機版頁面》（點擊打開鏈接）中現(xiàn)實了，如果用戶通過手機訪問你的PC頁面，自動跳轉(zhuǎn)到手機版頁面，但是，這其中有一個問題，如果那些手機用戶看到手機版頁面之后，還是需要瀏覽PC版頁面呢？此時，他們點擊“電腦版”之后，由于JS的作用，還是回把他們?nèi)踊厥謾C版頁面。
當然，你可以說是這是用戶的事情，讓他們的手機瀏覽器改改瀏覽標識就是了，但是，我們應該把程序?qū)懙酶佑押谩?/p>
此時，可以利用php，其實JSP，.NET，vbscript都一樣的，因為Session對象、頁面條件輸出在任意網(wǎng)頁編程語言中都有。這里拿php做例子，是因為php的編程代碼簡短，大家都能看懂。存一個用戶要訪問電腦版的Session。在PC版輸出跳轉(zhuǎn)到手機版頁面的JS腳本之前，先判斷是否有這個用戶要訪問電腦版的Session，如果沒有，或者是0，則跳轉(zhuǎn)到手機版，之所以要加一個是否為0的判斷，是因為有些手機版的用戶選擇了“電腦版”之后又選擇“手機版”，然后再選擇“電腦版”，你此時的Session對象已經(jīng)創(chuàng)建了，不能再根據(jù)為空判斷來輸出跳轉(zhuǎn)代碼。
一、基本目標
我們要做到如下的效果，在帶有類似iphone3GS的瀏覽器的標識的情況下，用戶選擇什么版的頁面，我們就給他們什么版本。
二、基本思想
為了你的編程更加簡單，你的手機版頁面應該這樣布置，如果你的電腦版頁面叫xx.html，那么你的手機版頁面就應該叫ml_xx.html，補一個前綴或者后綴之類的什么給它，便于重定向簡單。這里是補上ml_前綴。
上圖是本工程的頁面，其中ml_pc1.php,ml_pc2.php是手機版頁面，pc1.php,pc2.php是電腦版頁面，uaredirect.js是在《【JavaScript】通過JavaScript的方式，如果手機瀏覽器訪問PC版頁面，自動跳轉(zhuǎn)到手機版頁面》（點擊打開鏈接）中，那個如果手機訪問PC頁面，自動跳手機版頁面的js。ml2pc.php與pc2ml.php是我們后端的處理頁面。
三、制作過程
1、pc1.php,pc2.php電腦版頁面
pc2.php
正如前文敘述，因為要實現(xiàn)手機版訪問手機版頁面選擇“電腦版”之后不回到原來的手機版頁面這個功能，就先判斷判斷是否有這個用戶要訪問電腦版的Session，之后再交給uaredirect.js判斷是否是手機瀏覽器，跳轉(zhuǎn)到相應的手機版頁面。這段代碼放在頁頭，如果要跳轉(zhuǎn)，則不用加載下面的PC頁面的內(nèi)容。
<!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> <h3>pc2</h3> <a href="pc1.php">pc1</a> <!--這里開始是頁腳的代碼--> <hr /> <h4><a id="pc2ml">手機版</a>|電腦版</h4> <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內(nèi)容中，給之后的pc2ml.php用來的重定向。
同時注意，pc版自身的超級鏈接a標簽都應該與手機版頁面半點關(guān)系都沒有，通通都只是與電腦版的頁面相連。
pc1.php的代碼與pc1.php的代碼基本一樣，唯一的不同就是頁面的中間自由發(fā)揮的部分，頁頭頁尾的內(nèi)容其實可以打包起來，用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><!--以上頁頭的內(nèi)容不改變，可以打包--><h3>pc1</h3><a href="pc2.php">pc2</a><hr /><!--以下頁頭的內(nèi)容不改變，可以打包--><h4><a id="pc2ml">手機版</a>|電腦版</h4><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是手機版頁面
手機版的頁面相當來說就沒有這么判斷代碼了，因為手機版頁面的所有超級鏈接都只是與手機版頁面相連。僅僅是頁尾的電腦版鏈接，跳轉(zhuǎn)到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><h3>ml1</h3><a href="ml_pc2.php">ml2</a><hr /><h4>手機版|<a id="ml2pc">電腦版</a></h4><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、最后，最關(guān)鍵的兩個session處理頁面，其實也沒有什么，就是重定向與session的設(shè)置，變量的獲取語句。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>"; ?>兩個頁面唯一的改變就是跳轉(zhuǎn)的地址與session的設(shè)置，防止有些手機版的用戶選擇了“電腦版”之后又選擇“手機版”，然后再選擇“電腦版”。鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
新聞熱點
疑難解答
圖片精選
