Question

我想要一个由javascript脚本填充的“最近查看的页面”div，它添加用户在整个网站会话中请求的新页面的标题和网址，其中div的内容为还由cookie维护，以便在会话之间保持。

注意：添加到div的“历史列表”的新页面包括单击仅包含静态变量的href链接，因此只会向下移动窗口而不是获取全新的页面。 EG这些链接：

<a class="link" href="#john">  <a class="link" href="#mary">

这是两个要展示的新项目。

这里有一些代码示例并没有真正为我解决问题，因为它们在同一页面上不包含静态变量GET：

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

Answer 1

这是应该使用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/）

您的页面必须格式化为这两个测试页：

[history.html]

    <html>
     <head>
      <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>My First Page</title>
     </head>
     <body>
      <h2>PAGE ONE</h2>
      <h3>History</h3>
      <div id="history"></div>
      <h3>Links</h3>
      <a href="#part1">Page 1 -Part 1</a>
      <a href="#part2">Page 1 -Part 2</a>
      <a href="history2.html#part1">Page 2 - Part 1</a>
      <a href="history2.html#part2">Page 2 - Part 2</a>
      <h3>Parts</h3>
      <h4 id="part1">Part 1 of the First Page</h4>
      <h4 id="part2">Part 2 of the First Page</h4>
     </body>
    </html>

[history2.html]

    <html>
     <head>
      <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>My Second Page</title>
     </head>
     <body>
      <h2>PAGE TWO</h2>
      <h3>History</h3>
      <div id="history"></div>
      <h3>Links</h3>
      <a href="#part1">Page 2 - Part 1</a>
      <a href="#part2">Page 2 - Part 2</a>
      <a href="history.html#part1">Page 1 - Part 1</a>
      <a href="history.html#part2">Page 1 - Part 2</a>
      <h3>Parts</h3>
      <h4 id="part1">Part 1 of the Second Page</h4>
      <h4 id="part2">Part 2 of the Second Page</h4>
     </body>
    </html>

请注意，用于历史记录块的标题是链接所针对的标记的文本（如果它是#something href）或页面的标题（如果不是）。

任何具有jQuery知识的编码人员都可以根据您的特定需求进行调整。

最近查看的DIV没有页面重新加载

1 个答案: