javascript - DIV および AJAX での history.popstate の使用

Question

サイトの最初の「ランディング」ステージに背景画像と非常に最小限のコンテンツが含まれている Web サイト用の「ポータル」タイプのページを作成していますが、「私たちについて」というタイトルのリンクをクリックすると、ページをロードする AJAX コマンドが起動されます ' about.php」を「MoreDiv」と呼ばれる DIV に変換します。さらに、「MoreDiv」を表示するように設定するために JavaScript コマンドが起動され、同時に最初のテキスト div (「phototext」と呼ばれる) と「bottomlinks」と呼ばれる追加の div が非表示になります。ファイル 'about.php' には、AJAX を呼び出して 'InnerContent' と呼ばれる別の Div 内のコンテンツをロードするリンクのリストが含まれています...この div は 'MoreDiv' 内にあるため、リンクのリストは所定の位置に残り、下部のみページの一部が変更されます。リンクのリスト内に「ホームに戻る」があります

ページは PHP ファイルであり、表示された URL を直接入力すると、それぞれの Div に読み込まれた正しいサブページを含むページが読み込まれるため、 history.pushstate を使用して URL を希望どおりに表示しました。

私が今抱えている問題は、 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" を追加する)

javascript - DIV および AJAX での history.popstate の使用

0 に答える 0

Related

Reference