在地址栏中显示正确的URL

I'm using Jquery/Ajax to load html pages into a div on my website. I get links certain class to open up in the specified div. When doing this the address bar remains www.example.com. Due to the fact that I do have several pages that I will like to be able to share; so when people visit the links it will take them to the website but with the specific page loaded into the div container.

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

Here's a few lines of my code

这是我的代码的几行

$( 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;
});

2 个解决方案

#1

Unless the other pages are on your domain, you cannot do this. If the other pages are, see this * question: Updating address bar with new URL without hash or reloading the page.

除非您的域名中包含其他页面,否则您无法执行此操作。如果是其他页面,请参阅此*问题:使用新URL更新地址栏而不使用哈希或重新加载页面。

Here's the deal: since you are loading a new page and you want the URL of the browser to point to that page, you should just give users a link. They know how to use the back button. (You could use the information in the linked answer to to change the URL to something like this: http://www.trillumonopoly.com/other-website.com.)

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

#2

You can use the history object.

您可以使用历史对象。

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

With the use of the state {url: "pages/promo.html"} you can load your page into your div when your users navigate back/forward.

使用州{url:“pages / promo.html”},您可以在用户导航/前进时将页面加载到div中。

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

#1