jquery .load() 带有后退/前进按钮，没有哈希

Question

我正在使用我编写的 jQuery 脚本在我的网站上加载内容而不刷新页面，并且除了后退/前进按钮之外一切正常。我正在使用哈希链接并基于此加载我的 php 文件。

....
<li><a id="theShopLink" class="theMainLinks" href="#shopFrame">SHOP</a>

....
$('.theMainLinks').click(function() {
    var dest = $(this).prop("hash").substring(1);
    $('.theMainLinks').removeClass('active');
    $(this).addClass('active');


    if ($('#fullFrame > div').is(':visible')) {
        $('#homeFrame').addClass('animated fadeOutLeft');
        $('#homeFrame').html('');
    }
    console.log(dest);
    $("<style>html { background: #000; }</style>").appendTo("head");
    $('#nextFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/' + dest + '.php');
});

我尝试搜索并找到了一些使用 html5 window.history.pushState(); 的示例，但我不确定如何使用我当前的代码来处理它而无需重写脚本。此外，网址中的# 看起来很难看，无论如何？

我不打算使用除 jQuery 之外的任何类型的插件/依赖项，如果可能的话，我不打算使用最干净/最简单的代码。请解释一下，以便我理解，因为我需要对框架内的子导航链接做类似的事情，并将重用该功能。

更新

在初始网站加载或刷新时，我使用以下函数来确定要加载的内容。 -

$(function() {
    if (window.location.hash) {
        var target = window.location.hash.substring(1);
        var hash = window.location.hash;
if (hash.toLowerCase().indexOf("frame") >= 0) {

            $('#homeFrame').html('');
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/' + target + '.php');
        } else if (hash.toLowerCase().indexOf("shop-") >= 0) {

            $('#homeFrame').html('');
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/shopFrame.php');

        } else if (hash.toLowerCase().indexOf("news-") >= 0) {

......etc......

 } else if (hash.toLowerCase().indexOf("/") >= 0) {

            var newTar = target.split('/');

            $('#homeFrame').html('');
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/general/' + newTar + ' #patchnotesMain');


        } else {
            // Fragment doesn't exist
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/' + target + ' #newContent');
        }

    } else {
        $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/homeFrame.php');
    }
});

Answer 1

使用window.history.pushState()，我认为您可以在不重写脚本且不使用哈希的情况下获得所需的结果。您可以尝试类似的方法：

function handleState(state) {
  // here the code you need to change the page
  // more or less the body of $('.theMainLinks').click(function() {})
  // in your question code
}

$('.theMainLinks').click(function(event) {
  event.preventDefault();
  const state = {/* here setup the state for next step */}; 
  handleState(state);
  window.history.pushState(state);
});

$(window).on("popstate", function(event) {
  handleState(event.originalEvent.state);
});

希望这会有所帮助。

Answer 2

在我看来，# 通常用于检测页面中的锚点（跳转到页面中的任何位置），而不是更改要加载的页面的方式，原因是很难检测和处理 url。我建议您可以使用? 作为查询网址，而不是使用#。简单的示例 url 可以是这样的：www.yoururl.com/index.php?page=frame。

用于更改 url 并将页面状态推送到浏览器历史记录。您可以使用以下功能更改网址

function change_url(title, html, urlPath){
     document.title = title;
     window.history.pushState({"html":html,"title":title},"", urlPath);
}

更改 url 后，使用您的代码呈现新的 html

$('#homeFrame').html('');
$('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/' + target + '.php');

要检测事件后退/前进按钮，您可以使用window.onpopstate = function(e){ ... }。这一次，您的页面包含您刚刚推送到历史记录的所有数据，现在您可以轻松获取数据并将其分配给 html

window.onpopstate = function(e){
    if(e.state){ // if state's data is existed
        $('#homeFrame').html('');
        $('#homeFrame').html(e.state.html);
        document.title = e.state.title;
    }
};

如果我错了，请纠正我。希望这会有所帮助