使用 javascript 在客户端动态创建面包屑

Question

我想使用 java 脚本在客户端动态创建 面包屑。面包屑将是用户在导航时遵循的路径： 首页 > 关于我们 > 我们的历史..

锚标签将按照用户导航的顺序在每个页面上生成。

现在我可以使用服务器端技术轻松创建这些面包屑，但我想在客户端的每个页面上动态生成它。 现在不知道具体怎么实现。

我心中的一些逻辑是：

1. 使用 名称 在 java 脚本中创建一个 对象类型变量 和 值对，其中 name 是 当前页面的名称 value 是 该页面的网址。

2. 现在传递这个对象 变量使用 查询字符串 从一页导航到 其他。

3. 然后在第二页从查询字符串中获取该对象变量 并从该对象中提取名称和值对，然后使用 创建锚并将其添加到目标 div（占位符）。

4. 当用户转到另一个页面时再次添加名称和值对 对于所有上一页以及对象变量中最后一个当前页的名称和值对，并将其传递到下一页 使用查询字符串。

5. 现在在下一页做同样的事情并创建锚点。

使用 html5 客户端存储，我得到了一些类似的 here： html：

<ul id="navigation_links">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
</ul>

js:

$(document).ready(function(){
    bindEventToNavigation();
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(event.currentTarget).html());
            showBreadCrumb();
        });
    });
}


function breadcrumbStateSaver(text){
    //here we'll check if the browser has storage capabilities
    if(typeof(Storage) != "undefined"){
        if(sessionStorage.breadcrumb){
            //this is how you retrieve the breadcrumb from the storage
            var breadcrumb = sessionStorage.breadcrumb;
           sessionStorage.breadcrumb = breadcrumb + " >> "+text;
        } else {
           sessionStorage.breadcrumb = ""+text; 
        }
    }
    //if not you can build in a failover with cookies
}

function showBreadCrumb(){
     $("#breadcrumb").html(sessionStorage.breadcrumb);   
}
<div id="breadcrumb"></div>

但这里不是创建超链接的锚点，而是创建简单的文本，而我希望面包屑成为锚点并超链接到它们各自的页面。

我是 java 脚本的新手，不知道如何实现。 如果您对此有更好的逻辑和解决方案，请告诉我。

提前致谢。

Answer 1

当您将项目添加到面包屑时，您不会将它们添加为链接，您只是添加文本，并且您绑定到 li 元素的点击事件不会传递。最后，您没有为这些面包屑提供任何类型的 href 以供使用。

尝试这样的事情并将其放在 4 个页面上，每个页面上都有这些链接和脚本文件

<div id="breadcrumb"></div>
<ul id="navigation_links">
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li><a href="page4.html">Page 4</a></li>
</ul>

JS

$(document).ready(function(){
    bindEventToNavigation();
    showBreadCrumb(); //Show the breadcrumb when you arrive on the new page
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li > a"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(this).attr('href'), $(this).text());
            showBreadCrumb();
        });
    });
}

function breadcrumbStateSaver(link, text) {
    if (typeof (Storage) != "undefined") {
        if (sessionStorage.breadcrumb) {
            var breadcrumb = sessionStorage.breadcrumb;
            sessionStorage.breadcrumb = breadcrumb + " >> <a href='" + link + "'>" + text + "</a>";
        } else {
            sessionStorage.breadcrumb = "<a href='" + link + "'>" + text + "</a>";
        }
    }
}

这只会在第一个之后的页面上放置链接。因此，您也可以使用

$(document).ready(function () {
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

在每个页面的顶部并自动将其添加到面包屑中，而不是在点击时添加。如果您需要点击来运行其他功能/事件，您可以使用带有 id 的 span/li/div 标签，您可以将事件绑定到该标签，而不仅仅是使用锚点。

最后，这不会阻止面包屑中的重复，因此您可能需要考虑将链接和文本存储在一个数组中并从中构建面包屑。

Answer 2

就像@Luke 所说，您没有添加任何链接供面包屑导航。您必须像这样存储文本和链接：

function breadcrumbStateSaver(link, text) {
if (typeof (Storage) != "undefined") {
    if (sessionStorage.breadcrumb) {
        sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
        sessionStorage.locations = sessionStorage.locations + ";" + link; //use any delim you prefer
    }
    else {
        sessionStorage.breadcrumb = text;
        sessionStorage.locations = link;
    }
}

您可以将文本和链接都添加到一个存储变量中，然后用分隔符将其拆分以提取它！

您实际上可以在页面从document.location.href 加载时获取链接，而不是在单击时捕获链接，并且可以从document.title 或将在服务器中设置的某些属性获取文本。所以在document.ready上

$(document).ready(function(){
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

要更新<ul> 中的面包屑：

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    for(let index in crumbs)
        $("#navigation_links").append($("<li><a href="+links[index]+">"+ crumbs[index] +"</a></li>"));
}

这样，每次用户浏览您的网站时，它都会记录下来。如果您希望用户通过面包屑导航，通过单击面包屑返回他们所在的页面，请将上述代码更改为以下内容：

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    let crumbindex = parseInt(sessionStorage.crumbindex);
    for(let index in crumbs){
        $("#navigation_links").append($("<li><a class='crumb"+ (index==crumbindex ? "active" : "") + "' href='"+links[index]+"' data-node='"+index+"'>"+ crumbs[index] +"</a></li>")); //data-node will help in retrieving the index and class will be set to active for selected node
    }
}

还要补充：

$(document).ready(function(){
    $('#navigation_links').on('click', 'li a.crumb', function(){
        if (typeof (Storage) != "undefined") {
            sessionStorage.crumbindex = $(this).data('node');
            sessionStorage.navlinkclicked = "true"; //This will prevent from adding breadcrumb again
        }
    });
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

使用节点索引，您可以像这样插入面包屑：

function breadcrumbStateSaver(link, text) {
if (typeof (Storage) != "undefined") {
    if (sessionStorage.breadcrumb) {
        if (sessionStorage.navlinkclicked && sessionStorage.navlinkclicked=="true") {
            sessionStorage.navlinkclicked = "false"; //prevent changes or you can remove the rest of the crumbs from sessionStorage.breadcrumb and locations using a for loop
        }
        else {
            if(sessionStorage.crumbindex && sessionStorage.crumbindex!=-1) {
                let crumbs = sessionStorage.breadcrumb.split(";");
                let links = sessionStorage.locations.split(";");
                let crumbindex = parseInt(sessionStorage.crumbindex);
                sessionStorage.breadcrumb = crumbs[0];
                sessionStorage.locations= links[0];
                for(let index in crumbs){
                    if(index==0) continue;
                    sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + crumbs[index];
                    sessionStorage.locations= sessionStorage.locations + ";" + links[index];
                    if(index==crumbindex) break;
                }
                sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
                sessionStorage.locations = sessionStorage.locations + ";" + link; //insert the new link after crumbindex location
                sessionStorage.crumbindex = -1;
            }
            else{
                sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
                sessionStorage.locations = sessionStorage.locations + ";" + link; //keep appending
            }
        }
    }
    else {
        sessionStorage.breadcrumb = text;
        sessionStorage.locations = link;
    }
}

如果您只是想要导航的面包屑，而不是记录用户的遍历，您可以简单地使用window.location.pathname 拆分 url 路径。鉴于您的页面存储在具有索引页面的适当层次结构中，您所要做的就是拆分 url 路径并相应地更新 showBreadCrumb() 。您不需要使用会话存储！

    function showBreadCrumb(){
        let crumbs = window.location.pathname.split("/");
        for(let index=0; index<crumbs.length-1; index++){
            let text = crumbs[index];
            if(index==0) text = "Home";
            $("#navigation_links").append($("<li><a class='crumb"+ (index==crumbs.length-2? "active" : "") +"' href='"+buildRelativeLink(crumbs.length-index)+"'>"+ text +"</a></li>"));
        }
    }
    function buildRelativeLink(level)
    {
        level = level - 1;
        let link="";
        for (let i=1; i<level; i++)
        {
            link=link+ "../"; //Used to navigate one level up towards parent
        }
        return link;
    }