Javascript 将history.popstate与DIVs和AJAX一起使用

我正在为一个网站创建一个“门户”类型的页面a，网站上的初始“登陆”阶段包含一个背景图像和非常少的内容，但是单击一个名为“关于我们”的链接会触发一个AJAX命令，将页面“about.php”加载到一个名为“MoreDiv”的DIV中，激发javascript命令以将“MoreDiv”设置为可见，同时还隐藏初始文本div（称为“phototext”）和另一个名为“bottomlinks”的div。 然后，文件“about.php”包含一个链接列表，这些链接调用AJAX在另一个名为“InnerContent”的Div中加载内容。。。此div位于“MoreDiv”中，因此链接列表保持不变，仅页面底部部分发生更改。在链接列表中有一个“返回主页”链接，它触发javascript将“MoreDiv”的可见性设置为无，并显示“phototext”div和“bottomlinks”div，但也将“MoreDiv”的innerHTML更改为空（null）

我已经使用history.pushstate来获取URL，以查看我想要的样子，因为页面是一个PHP文件，因此直接输入显示的URL将加载页面，并将正确的子页面加载到相应的Div中

我现在的问题是如何使用history.popstate将这些变体保存到浏览器历史记录中的页面，以便在浏览器中单击“后退”按钮将更改Div的内容

Javascript:

function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
setVisibility('MoreDiv', 'none');


function ResetToHome(){
setVisibility('MoreDiv', 'none');
setVisibility('PhotoText', 'inline');
setVisibility('bottomlinks', 'inline');
history.pushState(null, null, "?home=y");
document.getElementById('MoreDiv').innerHTML = "";
}

function ahah(url,target) {

  document.getElementById(target).innerHTML = ' Fetching page...<br>(slow? <a href="Javascript:dud()" onclick="ResetToHome();">Reset Page</a>)';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url) {
var target = "MoreDiv"
var ExtraDiv = 'Extra text here';
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AJAX Error:\n"+ req.status + "\n" +req.statusText;
}
  }
}

function AjaxIt(url){

setVisibility('MoreDiv', 'inline');
setVisibility('PhotoText', 'none');
setVisibility('bottomlinks', 'none');

ahah(url,"MoreDiv");
history.pushState(null, null, "?page=about.php");

}






function haha(url) {
var target = "InnerContent";
  document.getElementById(target).innerHTML = ' Fetching page...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
req.onreadystatechange = function() {hahaDone(url);};
req.open("GET", url, true);
req.send("");
  }
  history.pushState(null, null, "?page="+url);

}  

function hahaDone(url) {
var target = "InnerContent";
var ExtraText = 'extra text';
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText+ExtraText;
    } else {
      document.getElementById(target).innerHTML=" AJAX Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

函数设置可见性（id，可见性）{
document.getElementById（id）.style.display=可见性；
}
setVisibility（'MoreDiv'，'none'）；
函数ResetToHome（）{
setVisibility（'MoreDiv'，'none'）；
setVisibility（'PhotoText'，'inline'）；
setVisibility（'bottomlinks'，'inline'）；
pushState（null，null，“？home=y”）；
document.getElementById（'MoreDiv'）.innerHTML=“”；
}
函数ahah（url、目标）{
document.getElementById（target.innerHTML='fetchingpage…
（slow？）；
if（window.XMLHttpRequest）{
req=新的XMLHttpRequest（）；
}else if（window.ActiveXObject）{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
如果（请求！=未定义）{
req.onreadystatechange=function（）{ahahDone（url）；}；
请求打开（“获取”，url，true）；
请求发送（“”）；
}
}  
函数ahahDone（url）{
var target=“MoreDiv”
var ExtraDiv='此处的额外文本'；
如果（req.readyState==4）{//仅当req“已加载”
如果（req.status==200）{//仅当“OK”时
document.getElementById（target.innerHTML=req.responseText；
}否则{
document.getElementById（target）.innerHTML=“AJAX错误：\n”+req.status+“\n”+req.statusText；
}
}
}
函数AjaxIt（url）{
setVisibility（'MoreDiv'，'inline'）；
setVisibility（'PhotoText'，'none'）；
setVisibility（'bottomlinks'，'none'）；
ahah（url，“MoreDiv”）；
pushState（null，null，“？page=about.php”）；
}
功能哈哈（网址）{
var target=“InnerContent”；
document.getElementById（target.innerHTML='Fetching page…'；
if（window.XMLHttpRequest）{
req=新的XMLHttpRequest（）；
}else if（window.ActiveXObject）{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
如果（请求！=未定义）{
req.onreadystatechange=函数（）{hahaDone（url）；}；
请求打开（“获取”，url，true）；
请求发送（“”）；
}
history.pushState（null，null，“？page=“+url”）；
}  
函数hahaDone（url）{
var target=“InnerContent”；
var extextext='额外文本'；
如果（req.readyState==4）{//仅当req“已加载”
如果（req.status==200）{//仅当“OK”时
document.getElementById（target.innerHTML=req.responseText+ExtraText；
}否则{
document.getElementById（target）.innerHTML=“AJAX错误：\n”+req.status+“\n”+req.statusText；
}
}
}

然后页面中有以下HTML（分别标记为主页和about.php）：

主页面

文本
欢迎
欢迎来到这个网站。此页面正在生成中





这是当前的测试样式

关于.PHP







关于网站
这是一个我们在背后谈论鲍勃的页面！鲍勃的脚很怪！

这就是页面的基本设置（输入一些文本只是为了填充空间）。。。那么，我如何才能让history.popstate正常工作，以保持当前基于javascript/AJAX的链接，同时根据history状态更改相应DIV的内容（和可见性）？ 谢谢

---

（另外，我希望能够使用“返回主页”链接重置使用历史记录对URL所做的任何更改。pushstate…因为目前我无法让它做任何事情，甚至更改URL以添加“？home=y”）

我现在能够获得“返回主页”链接以将URL状态推送到“？home=y”。。。我不能让它把“？”和后面的任何东西都删掉，所以现在就这样。。。但是，是否有一种方法可以将history.popstate与函数“haha”结合使用，以便单击浏览器后退按钮可以更改指定DIV中的内容？或者，此功能仅在列表项（li）内的href链接下可用，页面将加载链接的“href”值，而不是设置的其他值？。。。（我需要将href值与javascript实际加载的内容分开，这样非JS浏览器将加载相同的页面，但以php形式加载……因此任何javascript/html5操作都需要在“onclick”attirbute上执行，或者在“a”标记中使用“name”或某些自定义属性。）

MAIN PAGE 

<div ID="PhotoMain" name="PhotoMain" class="PhotoMain" style="position:relative; -webkit-border-radius: 10px;  -moz-border-radius: 10px; min-width:600px; max-width:60%">
<p><img src="http://www.ukastle.co.uk/discussion/gallery/image.php?album_id=67&image_id=2640" class="MainImage" ID="MainImage" name="MainImage" style=" -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; max-width:100%;"/></p>
<div name="MoreDiv" ID="MoreDiv" style="position: absolute;top: 10px; left: 15px; width: 95%; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; visibility:none; display:none;">text</div>

<div name="PhotoText" ID="PhotoText" style="position: absolute;top: 15px; left: 15px; width: 400px; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;"><h1>Welcome</h1>
Welcome to the website. this page is being built<br /><br />

 <br /><br /><a href="Javascript:dud()" onclick="AjaxIt('/about.php')">About Us</a>    </div>

<div name="bottomlinks" id="bottomlinks" style="width=100%; position: absolute;bottom: 15px; left: 15px;margin: 0;padding: 0;list-style-type: none;text-align: center; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6); -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;">
<p style="display: inline; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; font-size:1.1em;">This is currently a test style.</p></div>


</div>

ABOUT.PHP

<div style="position:relative;">
<div name="Linklist" id="Linklist" style="position: absolute;top: 50px; left: -10px; width: 35%; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:1px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; text-align:left;">
<ul class="QuickLinks">

<li><span><a  href="?page=tc" onclick="haha('/tc.php'); return false;">Terms of Use &amp; Privacy Policy</a></span></li>
<li><span><a  href="?page=cg" onclick="haha('/cg.php'); return false;">Guide Page</a></span></li>
<li><span><a  href="?page=mm" onclick="haha('/mm.php'); return false;">Management</a></span></li> 
<li><span><a  href="?page=lp" onclick="haha('/lp.php'); return false;">Links</a></span></li>
<li><span><a href="javascript:dud();" onclick="ResetToHome(); return false;">Return to main page</a></span></li>
</ul>
<div name="InnerContent" id="InnerContent" style="position: absolute;top: 350px; width:275%; max-height:95%; left: 0px; font-size:1em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; text-align:left; margin-bottom:30px;"><h2>About The Site</h2>
This is a page where we say stuff about Bob behind his back! Bob has funny feet!</div>