ページ間のナビゲーション

同じヘッダーとフッターを含む3ページ間を移動しようとしましたが、各ページの内容は異なります。ハッシュ変更時に異なる内容のHTMLをロードしたい。問題は、同じページを再度クリックすると、content.htmlが再度読み込まれることです。ページ間のナビゲーション

Javaスクリプト/ html/jqueryを使用して、HTMLを何度も読み込まずにコンテンツを使用するにはどうすればよいですか？

コード例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>One Page Test</title> 
    <link rel="stylesheet" type="text/css" href="css/homepage.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
<div id="main-container" class="main-container"> 
    <div id="header" class="header"> 
    </div> 
    <div id="content" class="content"></div> 
    <div id="footer" class="bot"></div> 
</div> 

<script> 
    document.onreadystatechange = function(){ 
     if (document.readyState == 'complete') { 
      window.onhashchange=hash_change; 
      window.onload=hash_change; 
      if(window.location.hash==''){ 
       //default hash 
       window.location.replace('#home.html'); 
      } 

      //load the header 
      $("#header").load("fragments/navigationbar.html"); 
      //load the footer 
      $("#footer").load("fragments/footer.html"); 
     } 
    } 

    function hash_change() 
    { 
     //get the new hash 
     var newHashCode = window.location.hash.substring(1); 

     if (newHashCode === "home.html"){ 
      $("#content").load("home.html"); 

     } else if (newHashCode === "aboutus.html") { 
      $("#content").load("aboutus.html"); 

     } else if (newHashCode === "contact.html"){ 
      $("#content").load("contact.html"); 

     } 

    } 
</script> 
</body> 
</html>

出典

2017-01-04 Regina Kreimer

JSナビゲーションを使用して、通常のHTMLで簡単にナビゲートできるのはなぜですか？ – Troyer

JSコンソールを確認すると、エラーが表示されることがあります。 –

長めのしかし適切なソリューションは、あなた自身でコンテンツキャッシュを構築することです。

たとえば、htmlを一度だけサーバーに問い合わせてから、$('#content')要素に設定します。このヘルパー関数を使用することができます。

var contentsCache = {}; 
var getAndCache = function(url, callback) { 
    var cachedContents = contentsCache[url]; 

    if (!cachedContents) { 
     $.get(url, function(serverContents) { 
      cachedContents = serverContents; 
      contentsCache[url] = cachedContents; 
      callback(cachedContents); 
     }); 
    } else { 
     callback(cachedContents); 
    } 
};

そして、$('#content').load呼び出しをこの新しい非同期方法の呼び出しで置き換えます。

function hash_change() 
{ 
    var fillContentCb = function(s) { 
     $('#content').html(s); 
    }; 
    //get the new hash 
    var newHashCode = window.location.hash.substring(1); 

    if (newHashCode === "home.html"){ 
     getAndCache("home.html", fillContentCb); 

    } else if (newHashCode === "aboutus.html") { 
     getAndCache("aboutus.html", fillContentCb); 
    } else if (newHashCode === "contact.html"){ 
     getAndCache("content.html", fillContentCb); 
    } 
}

コメントの中に示唆されているように、代わりにネイティブHTMLナビゲーションを使用することを検討してください。もう1つの提案は、このアプリケーションが成長する可能性が高い場合にルーティングをサポートするクライアント側のJSフレームワークを使用することです。

出典

2017-01-04 12:32:21 jorgonor

ありがとう！それは素晴らしい作品です！ –

initial.html

Navigationbar.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Navigation Bar</title> 
    <link rel="stylesheet" type="text/css" href="css/navigationbar.css"> 

</head> 
<body> 
<nav> 
    <img id="navigation-bar-logo" class="logo" src='images/flybryceLogo.png'> 
    <ul class="navigation-bar-ul"> 
     <li class="navigation-bar-li"><a id="navigation-bar-contact-page-tab" href="#contact.html">CONTACT</a></li> 
     <li class="navigation-bar-li"><a id="navigation-bar-about-us-page-tab" href="#aboutus.html">ABOUT US</a></li> 
     <li class="navigation-bar-li"><a id="navigation-bar-home-page-tab" href="#home.html">HOME</a></li> 
    </ul> 
</nav> 
</body> 
</html>

現在のハッシュの場所がクリックされています1と一致するかどうかをチェックする場合の条件を追加します。、そしてもしそれがちょうど戻ってきたら。グローバルなJS変数に格納し、ナビゲートするたびに設定する必要があります。

出典

2017-01-04 12:32:09 Orangesandlemons

私がやっていることを正確におかげ... –

ページ間のナビゲーション

答えて

関連する問題