javascript - 网站结构失去了浏览器返回功能

Question

我最近开始重新设计/改造一个使用框架/框架集的网站（我相信它是在 1990 年代创建的！）

我选择了以下概述的基本结构：

<body>
  header & navigation
  content
  footer
</bod>

以上是在我的 Index.html 页面中定义的，页眉/导航和页脚是静态的。内容根据从导航菜单中选择的项目而变化。

我现在唯一的问题是，例如，用户进入主页（index.html），然后从导航菜单中选择并刷新...如果用户单击任何浏览器上的“后退”按钮，他们不会回到主页，而是回到以前的浏览器位置，比如说，他们来自谷歌搜索，他们会被重定向到那里。

索引.html：

    <html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">

<script src="javascript/modernizr-2.6.2.min.js"></script>

<link type="text/css" href="css/main.css" rel="stylesheet">

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>    
<script type="text/javascript" src="javascript/redesign_js.js"></script>
<script type="text/javascript" src="javascript/carousel_js.js"></script>

<!-- New JavaScript functions to enable dropdown navigation -->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

<!-- New JavaScript functions to enable refresh of page content DIV -->
<script type="text/javascript"> 
    function getPageContent(a) {
        $.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
        $('#welcome').hide();
    }

    function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }
</script>



<style> 

/*nav {background:#FFF;float:left;}*/
nav ul {
    text-align:left;    
}
nav ul li {
    float:left; 
    display:inline;
    border-right: 1px solid #083D72;
}
nav ul li:hover {
    background:#2D8FF0; 
}
nav ul li a {
    display:block; 
    color:#444; 
}
nav ul li ul {
    position:absolute; 
    width:180px;
    background:#09427C;
    font-size: 12px;    
}
nav ul li ul li {
    width:180px;    
}
nav ul li ul li a {
    display:block; 
    color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
    display:none;
}
nav ul li:hover ul.fallback {
    display:block;
}
</style>

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="">
    <div class="wrap">
        <hgroup>
            <h1 class="logo"><img src="images/logo.png" width="163" height="59" alt="Tables and Chairs"></h1>
            <h2 class="heading">Welcome to Tables and Chairs</h2>
        </hgroup>
    </div>
</tr>
</table>

<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="data-sources"><a href="#" title="">Date <span class="icon-caret-down"></span> </a>       
    <li>
        <a onClick="getPageContent('Information.html')">Information</a>
        <ul class="fallback">
        <li><a onClick="getPageContent('ovens.html')">Ovens</a></li>
            <li><a onClick="getPageContent('fridges.html')">Fridges</a></li>
            <li><a onClick="getPageContent('tables.html')">Tables</a></li>
            <li><a onClick="getPageContent('costing.html')">Costing</a></li>
            <li><a onClick="getPageContent('install.html')">Installation</a></li>
        </ul>
    </li>
    <li>
        <a onClick="getPageContent('legal.html')">Legal Info</a>
        <ul class="fallback">
            <li><a onClick="getPageContent('terms.html')">Terms & Conditions</a></li>
            <li><a onClick="getPageContent('data.html')">Data Protection</a></li>                  
        </ul>
    </li>
    <li>
        <a onClick="getPageContent('contact.html')">Contact Us</a>
        <ul class="fallback">
        <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
            <li><a onClick="getPageContent('comments.html')">Your Comments</a></li>
            <li><a onClick="getPageContent('addinfos.html')">Additional Info</a></li>
        </ul>
    </li>
    <li>
        <a onClick="getPageContent('cookies.html')">Cookies</a>
    </li>
</li>
</ul>
</nav>
<!-- MENU END -->


<div id="PageContent">
    <section id="welcome">
        <div class="page-heading">
            <h1 class="wrap">Welcome to Tables and Chairs</h1>
        </div>


        <div class="ctr-full">
            <form class="wrap createsrc" method="post">
            <div class="grid one-whole">
                <section class="box">
                    <fieldset>
                    <ul id="carousel">
                                <li><img width="200" height="133" src="images/slideImage1.png" /></li>
                                <li><img width="200" height="133" src="images/slideImage2.png" /></li>
                                <li><img width="200" height="133" src="images/slideImage3.png" /></li>
                                <li><img width="200" height="133" src="images/slideImage4.png" /></li>
                            </ul>
                </fieldset>
                </section>
            </div>
            <br>                    
            </form>
        </div>
    </section>
</div>

<footer class="site-footer" role="contentinfo">
<div class="wrap">
    <small class="fr">&copy; 2013 T&C All rights reserved</small>
</div>
</footer> <!-- END footer.site-footer -->

</body>
</html>

任何帮助表示赞赏。

谢谢

更新 **

谢谢你们的反馈。我正在尝试实现 Ben Almans 插件。

我已经下载了他的完整插件，并将以下代码放在我的脑海中：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">


<script src="javascript/modernizr-2.6.2.min.js"></script>


<link type="text/css" href="css/main.css" rel="stylesheet">

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>    
<script type="text/javascript" src="javascript/redesign_js.js"></script>
<script type="text/javascript" src="javascript/jquery.ba-hashchange.js"></script>

<!-- New JavaScript functions to enable dropdown navigation -->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

<!-- New JavaScript functions to enable history navigation -->
<script type="text/javascript"> 
    $(function(){

      // Bind an event to window.onhashchange that, when the hash changes, gets the
      // hash and adds the class "selected" to any matching nav link.
      $(window).hashchange( function(){
        var hash = location.hash;

        // Set the page title based on the hash.
        document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';

        // Iterate over all nav links, setting the "selected" class as-appropriate.
        $('#nav li').each(function(){
          var that = $(this);
          that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
        });
      })

      // Since the event is only triggered when the hash changes, we need to trigger
      // the event now, to handle the hash the page may have loaded with.
      $(window).hashchange();

    });
</script>



<!-- New JavaScript functions to enable refresh of page content DIV -->
<script type="text/javascript"> 
    function getPageContent(a) {
        $.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
        $('#welcome').hide();
    }

    function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }
</script>



<style> 

/*as per earlier post....*/

</style>

</head>

<body>

#tag 似乎不像在 Firbug 中那样工作，我看到以下错误：

类型错误：$.browser 未定义。

任何帮助表示赞赏。

score 2 · Accepted Answer

因为它们实际上并没有去任何地方 - 您的链接似乎只是动态地改变内容，这意味着它们在技术上永远不会离开索引页面并且后退按钮可以正常工作。

很多技术都提供了模板技术，这样原始的黑客真的不需要使用“母版”页面；明确定义每个页面，并使用链接将它们串在一起形成一个可浏览的站点。

score 2 · Accepted Answer

您最简单的解决方案是在 url 的末尾添加一个哈希。由于您已经在使用 jQuery，您可能应该只使用一个插件：例如http://benalman.com/projects/jquery-hashchange-plugin

看演示页面

扩展一些评论：

在 Web 服务器上有多个 html 文件并单击导航上的链接将带您到该文件是更正常的（传统上），例如您的网站文件夹中可能有 3 个文件：

索引.html
about.html
联系人.html

然后，您的用户将单击您页面上的链接<a href="index.html">Home</a>（例如），这将导致 Web 服务器将索引页面提供给请求的用户代理。

通常人们在多个页面中都有相同的元素，例如页眉和页脚。为了在不复制粘贴到所有文件的情况下实现这一点，您需要一个服务器端预处理器，例如 PHP 或 ASP.Net，它们分别具有母版页和包含的概念。

当然，也可以选择使用 MVC 类型的框架——但我也不想把它混入其中。

javascript - 网站结构失去了浏览器返回功能

2 回答 2

Related

Reference