代码之家 › 专栏 › 技术社区 › robg

内容通过ajax加载到div中,哈希附加到url,但不能添加历史记录和书签状态

browser-history ajax jquery

robg · 技术社区 · 6 年前

我很惭愧地说,我花了多少时间与之斗争,尝试了我在这里和其他地方找到的各种方法,我迫切需要一些帮助。这就是我所处的位置:我有一系列交互式SVG图表,其中包含各种链接(到WP帖子),每个链接都分配了帖子链接类。单击后,任何链接帖子的内容都会通过ajax成功加载到图表下方的div中,并在URL中附加一个哈希片段。到目前为止一切都很好。

但我无法以允许浏览器后退按钮功能的方式创建和捕获历史,也无法捕获页面的“ajaxed”状态以允许书签或链接共享。

我曾研究过使用pushState、replaceState和popstate获取浏览器历史记录,认为这是解决方案,但我尝试过的都不管用。因此,我删除了这些不正确的位置,并提供了下面的基本代码,寻求一些指导,以使标题、后退按钮和书签正常工作。下面的代码包含在更大的文档就绪功能中:

//AJAX LOAD SINGLE POST CONTENT ON PAGE
$(function(){

    //enable accordion to function within ajaxed content
    $.ajaxSetup({
        cache:false,
        complete: function() {
            var cpicons = {
                header: "iconClosed",
                activeHeader: "iconOpen"
            };
            $(".accordion").accordion({
                header: "h3",
                collapsible: true,
                heightStyle: "content",
                navigation: true,
                icons:cpicons
            });
            $(".accordion-allclosed").accordion({
                header: "h3",
                collapsible: true,
                active: true,
                heightStyle: "content",
                navigation: true ,
                icons: cpicons
            });
        }
    });

    $(".post-link").click(function(e) {
        var toLoad = $(this).attr("href")+"#single-jobtype-post-container";         

        //capture slug from post url to use as hash
        var slug = $(this).attr("href").match(/[^/]*(?=(\/)?$)/)[0];
        window.location.hash = slug;
        //insert spinner followed by post's content 
        $("#single-jobtype-post-container").html("<div class='loading d-all t-all m-all'><i class='fas fa-spinner fa-spin fa-3x'></i></div>");
        $("#single-jobtype-post-container").load(toLoad);

        e.preventDefault();             
    });     

});

---更新---

正如下面Kamil所建议的,我改变了方法,让URL通过hashchange事件驱动JavaScript。更简单,解决了问题,吸取了教训!这是我的工作代码:

        $(function() {

        $("#exploration-grid a").click(function(e) {
            window.location.hash = $(this).attr("id");
            e.preventDefault();

            //set the "active" class as appropriate
            $('#exploration-grid a').removeClass('active');
            $(this).addClass('active');  

        });

        $(window).bind("hashchange", function(){
            var newHash = window.location.hash.substring(1);
            var postURL = window.location.protocol + "//" + window.location.host + "/" + "jobtypes" + "/" + newHash;

            if (newHash) {

                $("#single-jobtype-post-container").html("<div class='loading d-all t-all m-all'><i class='fas fa-spinner fa-spin fa-3x'></i></div>");
                $("#single-jobtype-post-container").load(postURL);

                var hashval = newHash.replace(/-/g, " ");
                hashtitle = hashval.toUpperCase();
                document.title = document.title + " - " + hashtitle;

            };

        });

        $(window).trigger("hashchange");

    });

2 回复 | 直到 6 年前

Kamil Jarosz 6 年前

与其在ajax'ing之后更改哈希值,不如先更改哈希值,然后通过加载适当的内容来响应哈希值的更改?

考虑以下职位: How to implement a hash-key navigation?

该职位的相关内容如下:

if ("onhashchange" in window) {  
  alert("The browser supports the hashchange event!");  
}  

function locationHashChanged() {  
  if (location.hash === "#somecoolfeature") {  
    somecoolfeature();  
  }  
}  

window.onhashchange = locationHashChanged

您需要将内容加载代码粘贴在locationHashChanged函数中,并根据哈希下载代码段。浏览器应该自动跟踪其历史记录中的哈希值,您只需要为每个状态输入反动代码。

我曾在一个ERP网站上工作,该网站使用哈希导航来支持单页模型。当我开始从事web开发时,这对我来说是相当酷的东西。

halfer Rajnish Kumar 6 年前

我不知道您为什么要这样做,但如果您愿意,可以尝试以下脚本:

a、 html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"><!--needed to define charset if you want grab using load() correctly-->
</head>
<body>
<a class="post-link" href="http://localhost/gauz/b.html">try me (B)<a><br>
<a class="post-link" href="http://localhost/gauz/c.html">try me (C)<a><br>
<div id='single-jobtype-post-container'>I'm default for a.html</div>
<div class="share-link">share link: <span></span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){

    function getData(url, clicked=false){
        if(window.location.hash == ''){
            //capture slug from post url to use as hash
            var slug = url.match(/[^/]*(?=(\/)?$)/)[0];
            window.location.hash = slug.match(/[^/]*(?=(\/)?$)/)[0];
        }else{
            if(clicked) window.location.hash = url.match(/[^/]*(?=(\/)?$)/)[0];
            var a = url.split('/');
            a.splice(-1,1, window.location.hash.replace('#',''));
            var url = a.join('/');
        }

        //var toLoad = url+"#single-jobtype-post-container"; wrong, you need space here to just grab content inside id=single-jobtype-post-container
        var toLoad = url+" #single-jobtype-post-container"; //see the space?

        //set shared link
        $('.share-link').find('span').text(window.location.href);
        //insert spinner followed by post's content 
        $("#single-jobtype-post-container").html("loading");
        $("#single-jobtype-post-container").load(toLoad);
    }

    $(".post-link").click(function(e) {
        getData($(this).attr("href"), true);
        e.preventDefault();             
    });

    //first time load
    if(window.location.hash != '')  
        getData(window.location.href);

    //we need hashchange event to handle back and forward history button
    $(window).on('hashchange', function( e ) {
        getData(window.location.href);
    });
});
</script>
</body>
</html>

b、 html (其他页面示例)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="a">I am b.html</div>
<div id="b">xxxxxx</div>
<div id="single-jobtype-post-container">I'm your target of B</div>
<div id="c">yyyyy</div>
</body>
</html>

c、 html (另一个例子)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="a">I am c.html</div>
<div id="b">xxxxxx</div>
<div id="single-jobtype-post-container">I'm your target of C</div>
<div id="c">yyyyy</div>
</body>
</html>