如何在我的網站上使用HTML5 History Api？

我是一名初學者，對編程相當陌生（所以請儘可能保持簡單的答案）。如何在我的網站上使用HTML5 History Api？

我剛纔聽到HTML5歷史API的，這個API可以讓你更新瀏覽器地址欄的JavaScript，這樣你就可以根據URL改變頁面的內容。（我不知道該怎麼辦）

我目前使用XAMPP作爲localhost，phpmyadmin作爲數據庫，並使用Notepadd ++作爲文件編輯器，在谷歌瀏覽器上查看和測試我的網站。

我的問題是，我該如何使用這個新的HTML5 API歷史，使我的3個PHP文件，最多使用純粹的PHP或JavaScript的網頁間導航時工作的無縫連接。我可以給出的最佳示例是soundcloud在頁面之間導航時如何無縫播放音樂。

我想同樣的結果和我的「頭」，「VIS1」和「可見」 PHP文件相同的概念頁之間導航（這些頁面列出）時無縫工作。

文件我想工作的無縫導航時：

目錄：I-新\ htdocs中\ I-新\ INC ..

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

這些相同的3個文件，跨越下面的PHP包括了所有網頁：

目錄：I-新\ htdocs中\ I-新\

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

以下編碼：可見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>

來源

2015-05-10 Hedi

「phpmyadmin as database」 - phpmyadmin不是一個數據庫，而是一個用於mysql的管理工具。 – ThiefMaster

那麼你知道我的意思嗎？ – Hedi

每個PHP頁面的呈現全網頁，所以你可能最好使用它們之間的普通鏈接。

您可以刪除所有相同的部分，讓主頁呈現這些內容，然後當內部鏈接被按下時，它可以從您的服務器下載相關部分並將其插入到頁面中（使用History API更新URL）。您也可以通過某種方式讓服務器在跟蹤鏈接後完整地呈現適當的頁面，可能通過使用某種服務器端路由。

對我來說，它看起來並不像你需要使用歷史API的是，您的網站將很好地工作的超鏈接。

來源

2015-05-10 13:57:28

不，我想使用歷史API，以便我剛纔陳述的3個php文件，在瀏覽網站時不會不斷刷新。就像soundcloud音樂播放器一樣，我希望它能夠在瀏覽網站時無縫工作......這是我的目標。爲什麼我的問題擱置？我相信我正在尋求一個簡單易用的解決方案，以便我的3個PHP文件以某種方式在導航時無縫地工作。我相信這足夠簡單。我想要一個有效的答案，不管它有多短/多長，都不重要。給我1個答案@ThiefMaster ... – Hedi

我描述了一種方法，可以在我的答案中做到這一點，也許嘗試？或者看看其他人是如何做到的，也許閱讀soundcloud JavaScript。 –

如何在我的網站上使用HTML5 History Api？

回答

相關問題