历史API和History.js后退按钮问题 [英] History API and History.js Back Button issue

问题描述

我加载通过Ajax的页面。当用户点击该页面正在加载成功AJAX的链接，但当用户点击返回按钮的页面重新加载初始页面。这样的情况是这样的。

I am loading the page via Ajax. When the user clicks a link the page is being loaded AJAX successfully, but when the user click the back button the pages reloads the initial page. so the scenario is this.

1. 在加载初始页面（的index.php）
2. 的链接用户点击
3. 在页面加载成功
4. 单击后退按钮
5. 在初始页现在正在显示两次。

下面的标记了。

    $(function() {
            // Prepare
            var History = window.History; // Note: We are using a capital H instead of a lower h
            if (!History.enabled) {
                // History.js is disabled for this browser.
                // This is because we can optionally choose to support HTML4 browsers or not.
                return false;
            }

            // Bind to StateChange Event
            History.Adapter.bind(window, 'statechange', function() { // Note: We are using statechange instead of popstate
                var State = History.getState();
                $('#content').load(State.url);
            });

            $('a').click(function(evt) {
                evt.preventDefault();
                History.pushState(null, $(this).text(), $(this).attr('href'));
                alert(State.url)
            });
        });

这是标记

   <div id="wrap">
            <a href="page1.html">Page 1</a>
        </div>

        <div id="content">
            <p>Content within this box is replaced with content from
                supporting pages using javascript and AJAX.</p>
        </div>

如果你还是不明白我的问题或场景

IF you still do not get my question or the scenario

下面是完整的方案。 初始页

Here's the complete scenario. Initial Page

当用户点击该链接成功选定的页面加载

When the User Clicks the link the selected page loads successfully

当我点击后退按钮初始页现在增加一倍

When I click the back button the initial page is now doubled

正如你所看到的第一页链接加倍。这是一个浏览器的问题？或者我对历史的API understading是有所欠缺或丢失？什么是可能的解决方案呢？

As you can see the "Page1" link is doubled. Is this a browser issue? or my understading of the history api is something lacking or missing? What is the possible solution for this?

推荐答案

如果你建立你的网站使用类似的模板，无论是主要页面以及内容页面，你可以使用jquery.load容器选择器语法

If you construct your site to use a similar template for both the main pages as well as the content pages, you could use the container selector syntax for jquery.load:

// See: http://api.jquery.com/load/
$('#result').load('ajax/test.html #container');

而你的情况将导致：

Which in your case would result in:

$('#content').load(State.url + ' #content');

这将有额外的好处，内容URL网页直接访问，以及不会增加太多的技巧。

This will have the added benefit that the content url pages are accessible directly as well without adding to much tricks.

这篇关于历史API和History.js后退按钮问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！