没有散列的带有后退/前进按钮的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();找到了一些示例，但我不知道如何使用我的当前代码而不必重写脚本。另外，urls中的#看起来很难看，不管怎么说？

除了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，而不是使用#。简单的示例url可以如下所示：www.yoururl.com/index.php?page=frame。

用于更改url并将页的状态推送到浏览器历史记录。您可以使用以下函数更改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;
    }
};

如果我错了，请纠正我。希望这能帮上忙