Question

我是初学者，对编程很新（所以请尽可能简化答案）。

我刚刚听说过HTML5历史记录API，此API允许您使用JavaScript更新浏览器地址栏，因此您可以根据URL更改页面内容。（我不知道怎么做）

我目前正在使用XAMPP作为localhost，使用phpmyadmin作为数据库，并使用Notepadd ++作为文件编辑器，在Google Chrome上查看和测试我的网站。

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

我想在我的标题＆＃39;，＆＃39; Vis1＆＃39;中获得相同的结果和相同的概念。和＆＃39; Vis＆＃39; 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");?>

这些相同的3个文件包含在以下php页面中：

目录：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页面都会呈现一个完整的网页，因此您最好只使用它们之间的普通链接。

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

对我而言，您似乎还不需要使用历史记录API，您的网站可以正常使用超链接。

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

1 个答案: