如何在我的网站上使用 HTML5 历史记录 Api？

Question

我是初学者，对编程还很陌生（所以请让您的回答尽可能简单）。

我刚听说HTML5历史API，这个API可以让你用JavaScript更新浏览器地址栏，所以你可以根据需要更改页面内容到 URL。（我不知道该怎么做）

我目前使用 XAMPP 作为本地主机，phpmyadmin 作为数据库，使用 Notepadd++ 作为文件编辑器，在 Google [=58= 上查看和测试我的网站].

我的问题是，如何使用这个新的 HTML5 历史记录 API 以便我的 3 个 php 文件在纯粹使用 PHP 的页面之间导航时无缝工作或最多 javascript。我能举出的最好的例子就是 soundcloud 如何在页面之间导航时无缝播放音乐。

我希望我的 'header'、'Vis1' 和 'Vis' php 文件中的相同结果和相同概念在页面之间导航时无缝工作（这些页面已列出）。

我希望在导航时无缝工作的文件：

目录：i-neo\htdocs\i-neo\inc..

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

以下 php 页都包含这 3 个相同的文件：

目录：i-neo\htdocs\i-neo\

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

编码如下：vis1.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>

Answer 1

您的每个 PHP 页面都会呈现一个完整的网页，因此您最好只在它们之间使用普通的 link。

您可以删除所有相同的部分，让主页呈现这些部分，然后当按下内部 link 时，它可以从您的服务器下载相关部分并将其插入页面（使用历史记录 API 更新 URL）。您还希望有一些方法可以让服务器在跟随 link 之后完整地呈现适当的页面，可能是通过使用某种服务器端路由。

对我来说，您似乎不需要使用历史记录 API，但是您的网站可以在 hyperlinks 上正常运行。

如何在我的网站上使用 HTML5 历史记录 Api？

How do use HTML5 History Api on my Website?

html

javascript

php

history