브라우저 뒤로 단추를 사용하여 다시 방문할 수 있도록 페이지 상태 유지

브라우저 뒤로 단추를 사용하여 다시 방문할 수 있도록 페이지 상태 유지

사용자가 버튼을 누르는 것을 기준으로 동적으로 콘텐츠를 로드하는 페이지가 있습니다.

${document).ready(function)
{
    $("#myButton").click(function()
    {
        $("#dynamicDiv").load("www.example.com");
    });
}

동적 콘텐츠가 잘 작동하고, 하루 종일 페이지를 가져올 수 있습니다.그러나 다른 페이지에 대한 링크를 클릭한 다음 브라우저 뒤로 버튼을 눌러 페이지로 돌아오면 동적 콘텐츠가 로드되지 않은 것처럼 페이지가 완전히 재설정됩니다.

맹세코 전에 다른 행동을 본 적이 있지만, 아마 제가 미쳤을 수도 있습니다.브라우저는 페이지를 다시 렌더링하는 대신 페이지 상태를 유지해야 하지 않나요?

편집: 그나저나, 저는 Play! 프레임워크를 사용하고 있습니다. 만약 그것이 이것과 관련이 있다면요.

브라우저는 처음 받은 페이지를 로드합니다.Javascript를 통해 수행된 DOM 수정 사항은 보존되지 않습니다.

수정 사항을 보존하려면 추가 작업을 수행해야 합니다.DOM을 수정한 후 나중에 구문 분석하고 다시 만들 수 있는 식별자로 URL 해시를 업데이트합니다.페이지가 로드될 때마다 해시가 있는지 확인하고 식별자를 기반으로 DOM 수정을 수행해야 합니다.

예를 들어 사용자 정보를 동적으로 표시하는 경우.하나를 표시할 때마다 URL 해시를 "#/user/john"과 같은 것으로 변경합니다.페이지가 로드될 때마다 해시가 존재하는지 확인하고(window.location.hash) 구문 분석하고 사용자 정보를 로드해야 합니다.

브라우저 백업 기능을 구현하는 것은 어렵습니다.jquery.history.js와 같은 플러그인을 사용하면 더 쉬워집니다.

http://tkyk.github.com/jquery-history-plugin/

이를 위해 제가 사용하는 기술은 상태를 JSON으로 직렬화하고 해시 문자열에 저장한 다음 페이지를 다시 탐색할 때 다시 읽는 것입니다.이는 IE10+, Firefox, Chrome에서 테스트되었습니다.

예:

// On state change or at least before navigating away from the page, serialize and encode the state
// data you want to retain into the hash string

window.location.hash = encodeURIComponent(JSON.stringify(myData));

// If navigating away using Javascript, be sure to use window.location.href over window.location.replace

window.location.href = '/another-page-url'

....

// On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data
// by decoding and parsing the JSON string

if (window.location.hash) {

    // Read the hash string omitting the # prefix

    var hashJson = window.location.hash.substring(1);

    // Restore the deserialized data to memory

    myData = JSON.parse(decodeURIComponent(hashJson));
}

에피노시스엑스와 말콤 둘 다 옳습니다."딥 링크"라고도 합니다.최근 Play 응용 프로그램에서 JQuery Address Plugin을 사용하여 이 문제를 처리했습니다.

http://www.asual.com/jquery/address/

언급URL : https://stackoverflow.com/questions/9009858/preserve-page-state-for-revisiting-using-browser-back-button