网站结构已丢失浏览器返回功能 [英] Website Structure Has Lost Browser Back Capability
问题描述
我最近开始重新设计/改造一个使用框架/框架集的网站（我相信它是在20世纪90年代创建的！）
我选择了一个基本的结构概述如下：
< body>
header&导航
内容
页脚
< / bod>
以上是在我的Index.html页面中定义的，页眉/导航和页脚是静态的。 。内容会根据从导航菜单中选择的项目而改变。
现在唯一的问题是，例如，用户登录主页（索引.html），然后选择导航菜单中的项目，并刷新...如果用户点击任何浏览器上的后退按钮，他们不会回到主页，而是回到以前的浏览器位置，比方说，他们来了从Google搜索中，他们将被重定向到那里。
$ b Index.html：
< html>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>
< meta name =viewportcontent =width = device-width>
< script src =javascript / modernizr-2.6.2.min.js>< / script>
< link type =text / csshref =css / main.css =stylesheet>
< script type =text / javascriptsrc =javascript / jquery-1.9.1.min.js>< / script>
< script type =text / javascriptsrc =javascript / jquery-ui-1.10.1.custom.min.js>< / script>
< script type =text / javascriptsrc =javascript / redesign_js.js>< / script>
< script type =text / javascriptsrc =javascript / carousel_js.js>< / script>
<！ - 新的JavaScript函数启用下拉导航 - >
< 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>
<！ - 新的JavaScript函数启用刷新页面内容DIV - >
< script type =text / javascript>
函数getPageContent（a）{
$ .get（a，processContent，'html'）。fail（function（）{alert（'加载资源时出现问题，请重试'） ;}）;
$（'＃welcome'）。hide（）;
函数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;
颜色：＃444;
}
nav ul li ul {
position：absolute;
width：180px;
背景：＃09427C;
font-size：12px;
}
nav ul li li li {
width：180px;
}
nav ul li li li a {
display：block;
颜色：＃444;
}
nav ul li ul li：悬停{}
nav ul li ul.fallback {
display：none;
}
nav ul li：hover ul.fallback {
display：block;
}
< / style>
< / head>
< body>
< table width =100％border =0cellspacing =0cellpadding =0>
< tr class =>
< div class =wrap>
< hgroup>
< h1 class =logo>< img src =images / logo.pngwidth =163height =59alt =桌椅>< / h1>
< h2 class =heading>欢迎使用表格和椅子< / 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 =>日期< span class =icon-caret-down>< / span> < / A>
< li>
< a onClick =getPageContent（'Information.html'）>信息< / a>
< ul class =fallback>
< li>< a onClick =getPageContent（'ovens.html'）> Ovens< / a>< / li>
< li>< a onClick =getPageContent（'fridges.html'）>冰箱< / a>< / li>
< li>< a onClick =getPageContent（'tables.html'）>表< / a>< / li>
< li>< a onClick =getPageContent（'costing.html'）>成本核算< / a>< / li>
< li>< a onClick =getPageContent（'install.html'）>安装< / a>< / li>
< / ul>
< / li>
< li>
< a onClick =getPageContent（'legal.html'）>法律信息< / a>
< ul class =fallback>
< li>< a onClick =getPageContent（'terms.html'）>条款&状况及LT; / A>< /锂>
< li>< a onClick =getPageContent（'data.html'）>数据保护< / a>< / li>
< / ul>
< / li>
< li>
< a onClick =getPageContent（'contact.html'）>与我们联系< / a>
< ul class =fallback>
< li>< a href =javascript：openHelpWind（'contact'）>联系人详情< / a>< / li>
< li>< a onClick =getPageContent（'comments.html'）>您的评论< / a>< / li>
< li>< a onClick =getPageContent（'addinfos.html'）>其他信息< / a>< / li>
< / ul>
< / li>
< li>
< a onClick =getPageContent（'cookies.html'）> Cookie< / a>
< / li>
< / li>
< / ul>
< / nav>
<！ - MENU END - >
< div id =PageContent>
< section id =welcome>
< div class =page-heading>
< h1 class =wrap>欢迎来到桌椅< / h1>
< / div>
< div class =ctr-full>
< form class =wrap createsrcmethod =post>
< div class =grid one-whole>
< section class =box>
< fieldset>
< ul id =carousel>
< li>< img width =200height =133src =images / slideImage1.png/>< / li>
< li>< img width =200height =133src =images / slideImage2.png/>< / li>
< li>< img width =200height =133src =images / slideImage3.png/>< / li>
< li>< img width =200height =133src =images / slideImage4.png/>< / li>
< / ul>
< / fieldset>
< / section>
< / div>
< br>
< / form>
< / div>
< / section>
< / div>
< footer class =site-footerrole =contentinfo>
< div class =wrap>
< small class =fr>& copy; 2013 T& C保留所有权利< / small>
< / div>
< / footer> <！ - END footer.site-footer - >
< / body>
< / html>
任何帮助表示感谢。
/ p>
更新**
感谢您的反馈家伙。我试图实现Ben Almans插件。
我已经下载了他的完整插件，并将以下代码放在我的头部：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>
< meta name =viewportcontent =width = device-width>
< script src =javascript / modernizr-2.6.2.min.js>< / script>
< link type =text / csshref =css / main.css =stylesheet>
< script type =text / javascriptsrc =javascript / jquery-1.9.1.min.js>< / script>
< script type =text / javascriptsrc =javascript / jquery-ui-1.10.1.custom.min.js>< / script>
< script type =text / javascriptsrc =javascript / redesign_js.js>< / script>
< script type =text / javascriptsrc =javascript / jquery.ba-hashchange.js>< / script>
<！ - 新的JavaScript函数启用下拉导航 - >
< 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>
<！ - 新的JavaScript函数启用历史导航 - >
< script type =text / javascript>
$（function（）{
//将一个事件绑定到window.onhashchange，当哈希发生变化时，获取
//散列并添加类selected到任何匹配的导航链接
$（window）.hashchange（function（）{
var hash = location.hash;
//根据散列设置页面标题。
document.title ='散列是'+（hash.replace（/ ^＃/，''）||'blank'）+'。';
//迭代在所有导航链接中，设置selected类为适当的。
$（'＃nav li'）。each（function（）{
var that = $（this）;
[that.attr（'href'）=== hash？'addClass'：'removeClass']（'selected'）;
}）;
}）
//因为事件只在散列发生变化时触发，所以我们需要触发
//现在的事件来处理页面可能加载的散列
$（window）.hashchange（） ;
}）;
< / script>
<！ - 新的JavaScript函数启用刷新页面内容DIV - >
< script type =text / javascript>
函数getPageContent（a）{
$ .get（a，processContent，'html'）。fail（function（）{alert（'加载资源时出现问题，请重试'） ;}）;
$（'＃welcome'）。hide（）;
函数processContent（file_data）
{
$（＃PageContent）。html（file_data）;
}
< / script>
< style>
/ *根据之前的帖子.... * /
< / style>
< / head>
< body>
#tag并不像Firbug那样工作，我看到一个错误：
TypeError：$ .browser未定义。
任何帮助表示赞赏。
最简单的解决方案是将一个散列添加到url的末尾。由于您已经在使用jQuery，因此您应该只使用一个插件：例如 http://benalman.com/projects/jquery-hashchange-plugin
查看演示页面 a> 扩展一些评论： 传统上，使用多个html文件在网络服务器上，并点击导航上的链接将带你到该文件，例如您的网站文件夹中可能包含3个文件： 然后，您的用户将点击您网页上的 通常，人们在多个页面上具有相同的元素，例如页眉和页脚。为了实现这一点，不需要粘贴到所有文件中，您需要一个服务器端预处理器，例如PHP或ASP.Net，它们分别具有母版页的概念。 当然，也可以选择使用MVC类型的框架 - 但我不'我也想把它加入到混合中。 I've recently started to redesign/revamp a website that used frames/framesets (i believe is was created back in the 1990's!) I have opted for a basic structure outlined below: Where the above is defined in my Index.html page, the header/navigation and footer are static.. The content changes depending on what item is selected from the navigation menu. The only problem i have now is that, for example, a user comes on the homepage (index.html), then selects and item from the nav menu, which refreshes the ... If a user clicks the Back button on any browser, they do not go back to the homepage, but to the previous browsers location, say, they came from Google search, they would be redirected there. Index.html: Any help appreciated. Thanks Update ** Thanks for the feedback guys. I'm attempting to implement Ben Almans plugin. I have downloaded his full plugin, and placed the following code in my head: The #tag doesnt appear to work as in Firbug i am seeing an error of: TypeError: $.browser is undefined. Any help appreciated. Your simplest solution would be to add a hash to the end of the url. As you're already using jQuery, you should probably just use a plugin: e.g. http://benalman.com/projects/jquery-hashchange-plugin Look at the demo page Expanding on some of the comments: It is more normal (traditionally) to have multiple html files on a web server and clicking a link on the navigation will take you to that file e.g. your website folder could have 3 files in it: Then your users would click links on your page with Generally people have elements that are the same across multiple pages, for example headers and footers. In order to achieve this without copy pasting into all of your files you'll need a server side preprocessor e.g. PHP or ASP.Net which have the concept of Master pages and includes respectively. Of course, there is also the option of using an MVC type framework - but I don't want to throw that into the mix as well. 这篇关于网站结构已丢失浏览器返回功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< a href =index.html>主页< / a> （作为示例），这会导致Web服务器向索引用户代理服务索引页。 p>
<body>
header & navigation
content
footer
</bod>
<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">© 2013 T&C All rights reserved</small>
</div>
</footer> <!-- END footer.site-footer -->
</body>
</html>
<!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>
<a href="index.html">Home</a> (as an example) which would cause the web server to serve the index page to the requesting user agent.
