0

デバイス固有のレイアウトと、ブラウザーのビューポートに基づくコンテンツをサーバーにしようとしています。私は重いサイトを持っており、主にページの読み込み速度という特定の理由から、メディア クエリを使用していません。このタスクは、この方法でのみ実行する必要があります。

よし、こんな状況だ……。

2 つのファイルがindex.phpあり、viewport.php両方ともフォルダーに存在しますhttp://localhost/test/

ブラウザーのビューポートを取得し、値を PHP 変数に変換するために、次のスクリプトを使用しています。

<?php
if (isset($_GET['width'])) {
  $layoutType = $_GET['width'];

      if ( $layoutType >= 240 && $layoutType <= 600 ) {
        $layoutType = 'mobile';
      } else if ($layoutType >= 601 && $layoutType <= 900 ) {
          $layoutType = 'tablet';
      } else {
         $layoutType = 'desktop';
      }
} else {
  echo "<script language='javascript'>\n";
  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
            . "&width=\" + document.documentElement.clientWidth;\n";
  echo "</script>\n";
  exit();
}
?>

私の質問:

Q1. 複数回使用できるようにセッション変数$layoutTypeとして保存するにはどうすればよいですか? それの正しい構文は何ですか？

Q2. ファイルを実行して、他のデータを取得せずに取得するにはどうすればよいviewport.phpですかindex.php。$layoutTypeこれは、<?php require_once ?>メソッドを使用することで、次のような URL を取得しているためですhttp://localhost/test/index.php?&width=1600。URLを同様に表示したいhttp://localhost/test/。index.phpファイルで使用する必要がある正しい構文は何ですか?

Q3. index.php?&width=1600URL からAjax 部分をスキップする方法はありますか? 経由してみましたが、 「ページが正しくリダイレ​​クトされていません」.htaccessというエラーが表示されます

注: jQuery や MooTools などの JavaScript ライブラリを使用するつもりはありません。これは、私の Web サイト全体で唯一の JavaScript 関数であり、ライブラリ全体をロードする意味がないからです。

4

2 に答える 2

2

まず、PHPはサーバー側で発生するため、ページが読み込まれると、（ページを読み込まずに）PHPを再度使用する唯一の方法は、おそらく特定の関数を実行して値を返す別のphpページに対してajax呼び出しを行うことです。

値をセッション変数として保存して継続的に使用できるようにする場合は、次のようにします。

  1. 彼らが最初にサイトにアクセスしたときに、セッションの存在をphpでチェックし、存在しない場合は、Javascript関数を呼び出してlayoutWidthを取得し、セッション変数として保存するphpページをajax呼び出ししてからページをリロードし、正しいレイアウトファイルを含めます。

私はおそらくこのメソッドを使用せず、代わりにJavaScript/JQueryを使用してこれを行う方法を実際に検討します。しかし、これはあなたがそれをするように頼んだ方法です。

あなたの例では、私はJQueryをまったく使用していませんが、インクルードは約19kb程度であり、作業が非常に簡単になります。

例：

index.php

<?php
   session_start();
?>
<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <?php 
         if (empty($_SESSION['layoutWidth'])) {
            echo '<script type="text/javascript"> var session=false; var layoutWidth;</script>';
         } else {
            echo '<script type="text/javascript"> var session=true; var layoutWidth=' . $_SESSION['layoutWidth'] . ';</script>';
         }
      ?>
      <script type="text/javascript" src="js/viewport.js"></script>
   </head>
   <body>
         <?php

            if (!empty($_SESSION['layoutWidth'])) {
               $layoutWidth = $_SESSION['layoutWidth'];
               if ( $layoutWidth >= 240 && $layoutWidth <= 900 ) {
                  include('layout1.php');
               } else if ($layoutWidth > 900 && $layoutWidth <= 1200 ) {
                  include('layout2.php');
               } else {
                  include('layout3.php');
               }
            }
         ?>
   </body>
</html>

js / viewport.js

// JavaScript Document

window.onload = function() {
    // if there is no session (session = false)
    if (!session) {
        // call function to get the screen size
        getScreenWidth();

        // make ajax call to php page to set the session variable
        setSession();
    }
}

function getScreenWidth() {
    layoutWidth = screen.width;
}

function setSession() {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        // Reload the page
        window.location.reload();
        }
      }
    xmlhttp.open("POST","set_session.php?layoutWidth=" + layoutWidth,true);
    xmlhttp.send();
}

セッションを設定するためのphpファイルパラメータはajax呼び出しから渡されます：

set_session.php

<?php
    session_start();
    // you can check if it is already set if you like otherwise:
    $_SESSION['layoutWidth'] = $_REQUEST['layoutWidth'];
?>

layout1.php

<?php
   echo '<div>This is layout1.php</div>';
   echo '<div>Your screen width is: ' . $_SESSION['layoutWidth'] . '</div>';
?>

layout2.php

<?php
  echo '<div>This is layout2.php</div>';
  echo '<div>Your screen width is: ' . $_SESSION['layoutWidth'] . '</div>';
?>

layout3.php

<?php
   echo '<div>This is layout3.php</div>';
   echo '<div>Your screen width is: ' . $_SESSION['layoutWidth'] . '</div>';
?>

このメソッドは、URLでパラメータを渡す必要がないことを意味します。すべて非表示になります。

于 2012-04-30T23:35:10.387 に答える
1

Q1) $_SESSION['layoutType']=$layoutType;

Q2&Q3 ) 自分には複雑すぎると思います。あなたが持っている制限であなたが望むものを達成する最善の方法は、クッキーとセッションの力を組み合わせることです。より速くてきれいなコードが得られます。したがって、セッションのlayoutTypeが設定されているかどうかを確認し、設定されていない場合は、layoutTypeを取得してCookieに入れるJavaScriptコードを挿入し、次にviewport.phpをページに含めると、 Cookieが設定されているかどうかを確認し、将来の使用のためにセッションに転送するため、viewport.phpを次のように変更できます。

<?php
  if(isset($_SESSION['layoutType'])){
    //write the code for when session is set here
  }elseif(isset($_COOKIE["layoutType "])){
    $_SESSION['layoutType']=$_COOKIE["layoutType "];
  }else{
      $script = "<script language='javascript'>function SetCookie(cookieName,cookieValue) { var today = new Date(), expire = new Date(), nDays=1;expire.setTime(today.getTime() + 3600000*24*nDays);document.cookie = cookieName+'='+escape(cookieValue)+ ';expires='+expire.toGMTString();SetCookie('layoutType',document.documentElement.clientWidth}";
      echo $script;
  }
?>
于 2012-04-30T23:23:03.560 に答える