Question

我正在尝试开发一个网站并做一个非常标准的事情，我在常见的网页中看到。我有一个index.html页面，我有一个菜单栏，用户可以通过该菜单栏导航到其他页面。现在，我不是打开单独的页面，而是在同一<div id="content-wrapper"></div>页面的index.html中加载其他页面的内容。

允许我这样做的脚本如下所示：

<script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
 function getPage(url) {
    $("#content-wrapper").load(url);
 }
 </script>'

，导航链接如下：

<a href="#" title="" class="active" onclick="getPage(&#39;./web/contact/contact.html&#39;);">Contact</a>

这工作正常，但由于内容已加载到index.html网站，因此浏览器地址栏中的URL没有更改。因此，如果我刷新页面，我将被带到主页。因此，用户将无法使用URL分享任何特定页面。

我试图找到人们这样做的方式，并发现他们大多使用带有form方法的post元素，但无法找到一个很好的教程来执行此操作。 (Possible duplicate question without satisfactory answer)。我发现的其他答案是使用jQuery Address plugin，但不确定哪一个更好。

非常感谢任何解决方案或指导。

Answer 1

您可以通过在getPage函数中添加以下内容来更改地址栏中的网址。

if('pushState' in history)
     history.pushState(null,'',url);

但是，如果您现在点击重新加载，您将获得div的内容，而不是index.html。因此，您需要实现服务器代码以返回index.html，并为每个URL返回正确的内容。

Answer 2

考虑使用一些基本的PHP并学习如何做模板。

非常基本的例子：

的index.php：

<?PHP
if (isset($_GET['page'])
{
    $pageURL = 'pages/'.$myPage.'.php';
    if (!file_exists ($pageURL))
        die("invalid page");
} else {
    $pageURL = 'pages/home.php';
}
$myPage = $_GET['page'];
?>
<html>
<body>
<div id="header">
    <?PHP include('header.php');?>
</div>
<div id="body">
    <?PHP include($pageURL);?>
</div>
<div id="footer">
    <?PHP include('footer.php');?>
</div>
</body>
</html>

的header.php：

<a href="index.php?page=home">home</a>
<a href="index.php?page=info">info</a>

页/ home.php

<b>This is my home page</b>

等等等，你可以弄清楚剩下的。

使用表单元素将页面加载到div中并更新地址栏

2 个答案: