0

我想要一个由 javascript 脚本填充的“最近查看的页面”div，该脚本在用户在网站上的整个会话期间请求新页面时添加标题和 url，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/

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/ )

您的页面必须采用以下两个测试页面的格式：

[历史.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>第一页</h2>
      <h3>历史</h3>
      <div id="历史"></div>
      <h3>链接</h3>
      <a href="#part1">第 1 页 - 第 1 部分</a>
      <a href="#part2">第 1 页 - 第 2 部分</a>
      <a href="history2.html#part1">第 2 页 - 第 1 部分</a>
      <a href="history2.html#part2">第 2 页 - 第 2 部分</a>
      <h3>零件</h3>
      <h4 id="part1">首页第一部分</h4>
      <h4 id="part2">首页第二部分</h4>
     </正文>
    </html>

[历史2.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>第二页</h2>
      <h3>历史</h3>
      <div id="历史"></div>
      <h3>链接</h3>
      <a href="#part1">第 2 页 - 第 1 部分</a>
      <a href="#part2">第 2 页 - 第 2 部分</a>
      <a href="history.html#part1">第 1 页 - 第 1 部分</a>
      <a href="history.html#part2">第 1 页 - 第 2 部分</a>
      <h3>零件</h3>
      <h4 id="part1">第二页第一部分</h4>
      <h4 id="part2">第二页第二部分</h4>
     </正文>
    </html>

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

任何对 jQuery 有一定了解的编码人员都可以根据您的特定需求对其进行调整。

于 2009-03-15T03:29:30.873 回答