2015-05-10 3 views
2

Я новичок и довольно новичок в программировании (поэтому, пожалуйста, держите свои ответы простыми, насколько это возможно).Как использовать HTML5 History Api на моем сайте?

Я только что слышал об API истории HTML5. Этот API позволяет обновлять адресную строку браузера с помощью JavaScript, поэтому вы можете изменить содержимое страницы в соответствии с URL-адресом. (Который я понятия не имею, как это сделать)

В настоящее время я использую XAMPP как localhost, phpmyadmin как базу данных и используя Notepadd ++ в качестве редактора файлов, просматривая и тестируя свой сайт в Google Chrome.

Мои вопросы: как использовать этот новый API истории HTML5, чтобы мои 3 php-файлы работали без проблем при навигации по страницам с использованием всего лишь PHP или javascript. Лучший пример, который я могу дать, - это то, как soundcloud может легко воспроизводить музыку при навигации между страницами.

Мне хотелось бы получить тот же результат и ту же концепцию, что и мои php-файлы «header», «Vis1» и «Vis», которые легко работают при навигации по страницам (эти страницы перечислены).

Файлы Я хочу работать плавно при навигации:

Каталог: я-нео \ HTDOCS \ я-нео \ вкл ..

<?php include ("./inc/header.inc.php");?> 
    <?php include("./inc/vis1.inc.php");?> 
    <?php include("./inc/vis.inc.php");?> 

Эти же 3 файлы включены все по следующим PHP страницы:

Каталог: я-нео \ HTDOCS \ я-нео \

'home.php, index.php, msmyg.php, prof.php, nudg.php & frireq.php' 

Coding ниже: Vis 1.inc.php

<!doctype html> 
<html> 
<head> 
    <div id="vinfo"> 
     <meta name="description" content="blah"> 
     <title>blah</title> 
     <link type="text/css" rel="stylesheet" href="style/style.css"> 
      <div id="wrapper"> 
       <div id="fileWrapper" class="file_wrapper"> 
        <div id="info"> 
        </div> 
         <label for="uploadedFile"> 
         Drag & drop 
         </label> 
        <input type="file" id="uploadedFile"> 
        </input> 
       </div> 
      </div> 
     </div> 
    </head> 
</html> 

Код для: vis.inc.php

<!doctype html> 
<html> 
    <footer> 
     <link type="text/css" rel="stylesheet" href="style/style.css"> 
      <div id="v_wrapper"> 
       <canvas id='canvas' width="1950" height="800"><script    
       type="text/javascript" src="js/hav.js"></script>    
        </canvas> 
        </div> 
      <div id="c2"> 
       <small>random info<a href="website name"  target="_blank">website name - Owner</a></small> 
      </div> 
     </footer> 
</html> 

Код для: header.inc.php

<?php 
    include ("./inc/connect.inc.php"); 
    session_start(); 
    if (isset($_SESSION['user_login'])) { 
    $user = $_SESSION["user_login"]; 
    } 
    else { 
    $user = ""; 
    } 
    ?> 
    <!doctype html> 
    <html> 
    <head> 
     <title>i-neo</title> 
     <link rel="stylesheet" type="text/css" href="./css/style.css"/> 
    <script src="js/main.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="ineoMenu"> 
     <div id="ineoWrapper"> 
      <div class="logo"> 
       <img src="./img/i-neo.png" /> 
      </div> 
      <div class="search_ineo"> 
       <form action="search.php" method="GET" id="search"> 
        <input type="text" name="q" size="50" 
placeholder="Search" .../> 
       </form> 
      </div> 
     </div> 


     </div> 

     <?php 

     if (isset($_SESSION["user_login"])) 
     { 
     echo ' 
      <div id="menu"> 
       <a href="home">Home</a> 
       <a href="'.$use.'">Prof</a> 

       <a href="set.php">Set</a> 
       <a href="msmyg.php">Me</a> 

       <a href="frireq.php.php">Fr</a> 
       <a href="nudg.php">Nudg</a> 
       <a href="logout.php">Logout</a> 

      </div> 
      '; 
     } 
     else{ 

      echo'<div id="menu"> 
      <a href="index.php"/>S</a> 
      <a href="index.php">L </a> 
      </div> 
     '; 
     } 
     ?> 

     <div id="wrapper"> 
</html>  
<footer> 
    <div id="c1">   
     <?php echo "Hedi Bej &copy; i-neo 2015"; ?> 
    </div> 
</footer> 
+0

«phpmyadmin as database» - phpmyadmin - это не база данных, а средство управления для mysql. – ThiefMaster

+0

Ну, вы знаете, что я имел в виду ... – Hedi

ответ

2

Каждый из ваших PHP страниц оказывают полный веб-страницы, поэтому вам, вероятно, лучше всего использовать обычные ссылки между ними.

Вы можете удалить все части, которые являются одинаковыми на каждой странице, и затем, когда внутренняя ссылка будет нажата, вы можете загрузить соответствующий раздел со своего сервера и вставить его на страницу (используя API истории для обновления URL-адреса). Вы также хотели бы иметь способ, чтобы сервер отображал соответствующую страницу в полном объеме после ссылки на нее, возможно, используя некоторую маршрутизацию на стороне сервера.

Для меня не похоже, что вам нужно использовать API истории, ваш сайт будет работать с гиперссылками.

+0

Нет, я хочу использовать API истории, чтобы 3 файла php, о которых я только что говорил, не постоянно обновляется при навигации по веб-сайту. Так же, как музыкальный проигрыватель soundcloud, я хочу, чтобы он работал без проблем во время навигации по веб-сайту ... Это моя цель. Почему мой вопрос приостановлен? Я считаю, что я прошу простого и легкого решения, так что мои 3 php-файлы каким-то образом работают без проблем во время навигации. Я считаю, что это достаточно узко и достаточно просто. Мне нужен ответ, который работает, независимо от того, насколько он короток/длинный, и не имеет значения, в каком направлении. Просто дайте мне 1 ответ, который работает @ThiefMaster ... – Hedi

+0

Я описал способ, которым вы могли бы это сделать в своем ответе, может быть, попробовать? Или посмотрите, как это сделали другие люди, возможно, прочитали soundcloud JavaScript. –