Question

我正在使用Jquery / Ajax将html页面加载到我网站上的div。我在指定的div中获取要打开的链接。执行此操作时，地址栏仍为www.example.com。由于我确实有几个页面，我希望能够分享;因此，当人们访问链接时，它会将他们带到网站，但将特定页面加载到div容器中。

这是我的代码的几行

$( document ).ready(function() {
     $.ajax({
    method: 'GET',
    url: "pages/promo.html",
    success: function(content)
    {
        $('#contentarea').html (content);
    }
    });
});



$('.menu_nav') .click (function () {
    var href = $(this) .attr('href');
    $('#contentarea').hide() .load(href).slideDown( 'very slow' )
    return false;
});

Answer 1

除非您的域名中包含其他页面，否则您无法执行此操作。如果其他页面是，请参阅此StackOverflow问题：Updating address bar with new URL without hash or reloading the page。

此处的交易：由于您要加载新页面并且希望浏览器的URL指向该页面，因此您应该只为用户提供一个链接。他们知道如何使用后退按钮。（您可以使用链接答案中的信息将URL更改为以下内容：http://www.trillumonopoly.com/other-website.com。）

Answer 2

您可以使用article对象。

$('#contentarea').html(content);
history.pushState({url: "pages/promo.html"}, "", "pages/promo.html");

使用州{url: "pages/promo.html"}，您可以在用户向后/向前导航时将页面加载到div。

$(window).on("popstate", function(e) {
    if (e.originalEvent.state != null)
    {
        // AJAX load e.originalEvent.state.url
    }
})

在地址栏中显示正确的URL

2 个答案: