Ajax 연동시 history 문제(뒤로가기)

Ajax 연동시 history 문제(뒤로가기)

 

- 링크로 연결된 다음 페이지에서 history.back(); 하여도 Ajax로 불러들여두었던 페이지를 찾을 수 없다. history.back(); 으로 돌아온 주소는 페이지가 로드 된 시점에서의 값을 저장하고 있기 때문에 페이지 로드가 끝난 후 발생한 Ajax 페이지에 대해 처리할 수가 없는 문제가 있다. 이때 사용가능한 방법이다.

 

1. windows.history.pushState(data, title, url);

- URL history를 건드려준다. url 인수에 ajax에서 시동해야할 page변수와 해쉬(#)값을 넣어주면 된다.

  : 화면이 변화되지 않는다.

 

2. document.locaton.hash

- $('[name=이름값]').focus(); 와 같다고 생각하면 된다. 모바일 브라우저나 크롬등등에서 간혹 focus(); 를 인식하지 못할 때 사용한다.

 

예제.

<script type='Text/JavaScript'>

function ChkHash(id) {

    // id가 있으면 해쉬저장

    if( id ) {

        document.location.hash = id;

        location.href = "이동할파일?id=' + id;

    }

}

</script>

 

Ajax로 생성된 엘레멘트

<a name='<?=$id?>' href='JavaScript:ChkHash(<?=$id?>)' name='sThis'>어서와</a>

 

- <a name> 은 따로 원하는 포커스에 입력해주면된다.

- Ajax 생성 시간이 느려질 경우 정상 포거싱 되지 않으므로 $(document).ready(function() { ChkHash(); }); 로 문서가 로드될 때 if문으로 hash 를 체크해주어 setTimeout으로 딜레이후 페이지 리로드 해주고 hash를 삭제해주면 된다.

[출처] Ajax 연동시 history 문제(뒤로가기)|작성자 Xeroad