ホームページ > バックエンド開発 > PHPチュートリアル > [php] モバイル版ページにアクセスし、「PC版を使用」を選択しても元のモバイル版ページに戻りません。

[php] モバイル版ページにアクセスし、「PC版を使用」を選択しても元のモバイル版ページに戻りません。

WBOY
リリース: 2016-06-13 12:19:39
オリジナル
1058 人が閲覧しました

[php] モバイル版ページにアクセスする際に「PC版」を選択しても元のモバイル版ページに戻らない「PC版ページにアクセスすると、自動的にモバイル版ページにジャンプします」(クリックするとリンクが開きます) 携帯電話からPCページにアクセスすると、自動的にモバイル版ページにジャンプしますが、問題があります。 . 携帯電話ユーザーがモバイル版ページにアクセスした後も、PC 版ページを参照する必要がありますか?このとき、「PC版」をクリックしてもJSの機能によりモバイル版のページに戻ってしまいます。

もちろん、これはユーザーの仕事であり、モバイル ブラウザーにブラウジング ロゴを変更させるだけであると言えますが、プログラムはよりユーザー フレンドリーになるように作成する必要があります。

現時点では、php を使用できます。実際、Session オブジェクトとページの条件付き出力はどの Web プログラミング言語でも使用できるため、JSP、.NET、および vbscript はすべて同じです。 PHP プログラミング コードは短く、誰でも理解できるため、ここでは PHP を例として取り上げます。コンピュータ版のセッションにアクセスしたいユーザーを保存します。 PC版がモバイル版のページにジャンプするJSスクリプトを出力する前に、まずPC版のセッションにアクセスしたいユーザーがいるかどうかを判断し、存在しない場合はモバイル版にジャンプします。追加理由は0です。モバイル版の一部のユーザーが「PC版」→「モバイル版」→「PC版」を選択しているため、この時点でSessionオブジェクトが作成されており、出力することができません。空判定のジャンプコードについて。


1. 基本目標

iphone3GS に似たロゴを使用してブラウザで次の効果​​を実現したいと考えています。この場合、ユーザーがページのどのバージョンを選択しても、そのバージョンが提供されます。



2. 基本的な考え方

プログラミングを簡単にするために、モバイル バージョンのページは次のように配置する必要があります。コンピュータ バージョンのページが xx.html である場合、リダイレクトを簡単にするために、モバイル バージョンのページには ml_xx.html という名前を付ける必要があります。これが ml_ プレフィックスです。


上の写真はこのプロジェクトのページで、このうち ml_pc1.php と ml_pc2.php がモバイル版のページ、pc1.php と pc2 です。 php はパソコン版ページ、uaredirect.js は「[JavaScript] JavaScript により、モバイルブラウザが PC 版ページにアクセスすると自動的にモバイル版ページにジャンプします」(クリックするとリンクが開きます)にあります。携帯電話からPCページにアクセスすると、自動的にモバイル版のページにジャンプします。 ml2pc.php と pc2ml.php はバックエンド処理ページです。


3. 制作プロセス

1. pc1.php、pc2.php パソコン版ページ

.php

前述したように、モバイル版から「PC版」を選択した後に元のモバイル版ページに戻らない機能を実現するには、まず、モバイル版のページに戻りたいユーザーがいるかどうかを判断する必要があります。 PC 版のセッションにアクセスし、それを 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を非表示にしています。コンテンツ内の現在のページは、後で pc2ml.php によるリダイレクトに使用されます。

同時に、PC 版のハイパーリンク a タグはモバイル版のページとは関係がなく、すべて PC 版のページに接続されているだけであることに注意してください。

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 はモバイル版ページです

モバイル版ページにはそのような判定コードがありません。モバイル バージョン ページ上のすべてのハイパーリンクは、モバイル バージョン ページにのみ接続されます。これはページの最後にあるコンピューター版へのリンクであり、php ml2pc.php にジャンプします。

ここには 1 ページのみ掲載されます。

<!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>
ログイン後にコピー
フッターの「PC バージョン」ハイパーリンクの href がインターセプトされ、現在の URL のアンダースコア以降の部分になります。

後で ml2pc.php に処理させます。

3. 最後に、最も重要な 2 つのセッション処理ページは、実際には何もありません。リダイレクトとセッション設定、および変数取得ステートメントです。

ml2pc.php:

<?php$url=$_REQUEST["url"];session_start();$_SESSION["is_ml"]=1;echo "<script>window.location.href='${url}'</script>"; ?>
ログイン後にコピー
pc2ml.php:

2 つのページの唯一の変更は、ジャンプ アドレスとセッション設定です。 、一部のモバイル版ユーザーが「PC バージョン」、「モバイル バージョン」、「PC バージョン」の順に選択できないようにするためです。

この時点で、プロジェクト全体が完了しました。ユーザーはブラウザ識別子 UA を変更する必要がなくなりました。

<?php$url=$_REQUEST["url"];session_start();$_SESSION["is_ml"]=0;echo "<script>window.location.href='ml_${url}'</script>"; ?>
ログイン後にコピー

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート