0

我正在为一个网站创建一个“门户”类型的页面，其中网站上的初始“登陆”阶段包含背景图像和非常少的内容，但单击标题为“关于我们”的链接会触发 AJAX 命令来加载页面' about.php' 到名为 'MoreDiv' 的 DIV 中 - 此外，触发 javascript 命令以将 'MoreDiv' 设置为可见，同时还隐藏初始文本 div（称为 'phototext'）和一个称为 'bottomlinks' 的附加 div。然后，文件“about.php”包含一个链接列表，这些链接调用 AJAX 以在名为“InnerContent”的不同 Div 中加载内容......这个 div 在“MoreDiv”中，因此链接列表保持在原位，并且只有底部页面的一部分发生变化。在链接列表中是“返回首页”

我已经使用 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;
    }
  }
}

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

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>

这就是页面的基本设置（一些文本只是为了填充空间）......所以我怎样才能让 history.popstate 工作以保持当前基于 javascript/AJAX 的链接到位但也改变基于历史状态的各个 DIV 的内容（和可见性）？谢谢。

（ps。此外，我希望能够使用“返回主页”链接来重置使用 history.pushstate 对 URL 所做的任何更改......因为目前我无法让它做任何事情，即使更改 URL添加“？home = y”）

4

0 回答 0