0

サイトでのセッション中にユーザーが要求した新しいページのタイトルと URL を追加する JavaScript スクリプトで「最近表示したページ」div を埋めたいと思います。これにより、div のコンテンツも維持されます。セッション間で持続する Cookie。

注: div の「履歴リスト」に追加された新しいページには、ウィンドウを下に移動するだけで完全に新しいページを取得しない静的変数のみを含む href リンクのクリックが含まれます。EGこれらのリンク：

<a class="link" href="#john">  <a class="link" href="#mary">
  • これは、表示される2つの新しいアイテムです。

ここに、同じページにある間は静的変数 GET が含まれていないため、実際には問題を解決しないコード サンプルをいくつか示します。

http://community.actinic.com/showthread.php?t=33229
http://wordpress.org/extend/plugins/last-viewed-posts/installation/

4

1 に答える 1

4

jQueryを使用してやりたいことを実行する必要があるものは次のとおりです。

(function($){

    var history;

    function getHistory() {
        var tmp = $.cookie("history");
        if (tmp===undefined || tmp===null) tmp = "";
        if ($.trim(tmp)=="") tmp = [];
        else tmp = tmp.split("||");
        history = [];
        $.each(tmp, function(){
            var split = this.split("|");
            history.push({
                title: split[0],
                url: split[1]
            });
        });
    }

    function saveHistory() {
        var tmp = [];
        $.each(history, function(){
            tmp.push(this.title+"|"+this.url);
        });
        $.cookie("history",tmp.join("||"),{ expires: 60, path: "/" });
    }

    function addToHistory(title,url) {
        var newHistory = []
        $.each(history, function(){
            if (this.url!=url) newHistory.push(this);
        });
        history = newHistory;
        if (history.length>=10) {
            history.shift();
        }
        history.push({
            title: title,
            url: url
        });
        saveHistory();
        writeHistory();
    }

    function writeHistory() {
        var list = $("<ul />");
        $.each(history, function() {
            var element = $("<li />");
            var link = $("<a />");
            link.attr("href",this.url);
            link.text(this.title);
            element.append(link);
            list.append(element);
        });
        $("#history").empty().append(list);
    }

    $(document).ready(function(){
        getHistory();
        var url = document.location.href;
        var split = url.split("#");
        var title;
        if (split.length > 1) {
            title = $("#"+split[1]).text();
        } else {
            title = document.title;
        }
        if (title===undefined || title===null || $.trim(title)=="") title = url;
        addToHistory(title,url);
        url = split[0];
        $("a[href^='#']").click(function(){
            var link = $(this);
            var href = link.attr("href");
            var linkUrl = url+href;
            var title = $(href).text();
            if (title===undefined || title===null || $.trim(title)==="") title = linkUrl;
            addToHistory(title,linkUrl);
        });
    });

})(jQuery);

すべてのページに含めるjsファイルを入れます。また、その前にjquery.cookie.jsを含める必要があります（http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/）

ページは、次の2つのテストページのようにフォーマットする必要があります。

[history.html]

    <html>
     <頭>
      <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ script>
      <script type = "text / javascript" src = "jquery.cookie.js"> </ script>
      <script type = "text / javascript" src = "history.js"> </ script>
      <title>私の最初のページ</title>
     </ head>
     <本体>
      <h2>ページ1</h2>
      <h3>歴史</h3>
      <div id = "history"> </ div>
      <h3>リンク</h3>
      <ahref = "＃part1">ページ1-パート1-</a>
      <ahref = "＃part2">ページ1-パート2-</a>
      <ahref="history2.html#part1">ページ2-パート1-</a>
      <ahref="history2.html#part2">ページ2-パート2-</a>
      <h3>パーツ</h3>
      <h4id="part1">最初のページのパート1</h4>
      <h4id="part2">最初のページのパート2</h4>
     </ body>
    </ html>

[history2.html]

    <html>
     <頭>
      <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ script>
      <script type = "text / javascript" src = "jquery.cookie.js"> </ script>
      <script type = "text / javascript" src = "history.js"> </ script>
      <title>私の2番目のページ</title>
     </ head>
     <本体>
      <h2>ページ2</h2>
      <h3>歴史</h3>
      <div id = "history"> </ div>
      <h3>リンク</h3>
      <ahref = "＃part1">ページ2-パート1-</a>
      <ahref = "＃part2">ページ2-パート2-</a>
      <ahref="history.html#part1">ページ1-パート1-</a>
      <ahref="history.html#part2">ページ1-パート2-</a>
      <h3>パーツ</h3>
      <h4 id ="part1">2ページ目のパート1</h4>
      <h4 id ="part2">2ページ目のパート2</h4>
     </ body>
    </ html>

履歴ブロックに使用されるタイトルは、リンクのターゲットとなるタグのテキスト（#something hrefの場合）またはページのタイトル（そうでない場合）であることに注意してください。

jQueryの知識があるコーダーなら誰でも、特定のニーズに合わせてjQueryを微調整できます。

于 2009-03-15T03:29:30.873 に答える