Question

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

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

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

如果在我的Index.html页面中定义了上述内容，则标题/导航和页脚是静态的..内容会根据从导航菜单中选择的项目而更改。

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

的index.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中工作我看到错误：

TypeError：$ .browser未定义。

任何帮助表示感谢。

Answer 1

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

许多技术都提供模板技术，实际上不需要这样的原始黑客来使用“主”页面;明确定义每个页面并使用链接将它们串在一起形成一个可浏览的站点。

Answer 2

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

查看demo page

扩展一些评论：

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

的index.html
about.html
contact.html

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

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

当然，也可以选择使用MVC类型的框架 - 但我也不想把它放到混合框架中。

网站结构失去了浏览器后退功能

2 个答案: