Tìm kiếm trang web

javascript - Vấn đề nút Quay lại với History API và History.js

Tôi đang tải trang qua Ajax. Khi người dùng nhấp vào một liên kết, trang được tải AJAX thành công, nhưng khi người dùng nhấn nút quay lại, trang sẽ tải lại trang ban đầu. Vì vậy, kịch bản là như sau.

  1. Tải trang ban đầu (index.php)
  2. Người dùng nhấp vào liên kết
  3. Trang tải thành công
  4. Nhấn nút Quay lại
  5. Trang ban đầu hiện đang được hiển thị hai lần.

Đây là đánh dấu.

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

Đây là phần đánh dấu

   <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 bạn vẫn không hiểu câu hỏi hoặc tình huống của tôi

Đây là toàn bộ kịch bản. Trang ban đầu

Khi Người dùng nhấp vào liên kết, trang đã chọn sẽ tải thành công

Khi tôi nhấn nút quay lại, trang ban đầu bây giờ bị nhân đôi

Như bạn có thể thấy, liên kết "Page1" bị nhân đôi. Đây có phải là vấn đề của trình duyệt không? Hay là hiểu biết của tôi về API lịch sử còn thiếu sót hoặc chưa đầy đủ? Giải pháp khả thi cho việc này là gì?

Câu trả lời #1

Nếu bạn xây dựng trang web của mình để sử dụng một mẫu tương tự cho cả các trang chính cũng như các trang nội dung, bạn có thể sử dụng cú pháp bộ chọn container cho jquery.load:

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

Trong trường hợp của bạn sẽ dẫn đến:

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

Điều này sẽ có lợi ích bổ sung là các trang URL nội dung cũng có thể truy cập trực tiếp mà không cần thêm quá nhiều thủ thuật.

Câu trả lời số 2

Điều này có thể xảy ra vì khi bạn điều hướng ngược lại, nó sẽ kích hoạt sự kiện 'statechange', và trong callback của bạn bạn đang tải nội dung của trang đó với URL được cung cấp: $ ('#content').load(State.url);, vì vậy khi, chẳng hạn, bạn điều hướng ngược lại đến URL / nó sẽ tải nội dung của trang chỉ mục đó và đặt nó vào bên trong container của bạn, vì vậy đánh dấu của bạn thực sự sẽ trông như thế này:

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

<div id="content">
    <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>
</div>

Có một số cách để giải quyết vấn đề này - cách đơn giản nhất là chỉ phát hiện xem người dùng có điều hướng đến trang ban đầu hay không và không tải trang này qua ajax, mà chèn nội dung đã định sẵn. Bạn cũng có thể phát hiện ở phía máy chủ nếu yêu cầu được thực hiện qua ajax và sau đó chỉ trả về nội dung cần thiết để cập nhật trang của bạn (trong trường hợp của bạn có thể là <p>Nội dung trong hộp này được thay thế bằng nội dung từ các trang hỗ trợ sử dụng javascript và AJAX.</p>)