뉴스 웹 사이트 예 : Forbes / Zdnet은 한 웹 페이지를 다른 웹 페이지와 완벽하게 병합하는 방법은 무엇입니까?


14

예를 들어 가면 :

페이지 하단에 도착하면 새 뉴스 기사가로드되고 인터넷 브라우저의 URL이이 다음 기사 기사의 URL로 변경됩니다. 그래서 웹 페이지가 다음 페이지를 거의 즉시로드 할 수있는 방법이 궁금합니다. 예를 들어 다음 뉴스 기사의 웹 페이지를 사전 다운로드 한 다음 웹 페이지를 정말 빠르게로드합니까?


1
End키를 길게 누르면 로딩 과정이 지연됩니다.
MonkeyZeus

5
더 중요한 질문은 그렇게 하는가입니다.

답변:


25

짧은 대답은 페이지의 클라이언트 측 Javascript 코드가 페이지 하단에 "너무 가까이"있을 때이를 감지하여 서버에 더 많은 데이터를 요청한다는 것입니다.

너무 기술적이지 않으면 전체 웹 페이지를 다시로드하지 않습니다. 대신 해당 페이지의 Javascript 코드가 서버에서 더 많은 데이터를 요청한 다음 새 데이터를 수신하면 해당 데이터를 현재 페이지에 추가합니다. 변경할 필요가없는 페이지 부분은 그대로 유지됩니다.

가장 현대적인 방법은 HTML5 기록 수정 기능 을 사용하는 것입니다. HTML5 기록 수정 기능 은 해당 사이트에서 사용하는 것으로 보입니다.


4
설명에 단계가 없습니다. 실제로 페이지에 데이터를 추가하는 것과 함께 실제로 기록을 변경하는 단계입니다. 어떤은 "일을 가장 현대적인 방법으로 만드는 있기 때문에, 어색한의 종류를" 사실은이 질문에 대해 언급되지 않는 역사를 수정하는 과정을 의미한다. (문법적으로 이것은 나머지 페이지를 변경하지 않고 그대로 두거나 페이지에 데이터를 추가하는 것을 의미합니다. 일반적으로 AJAX로 수행되며 HTML5 기록 수정 기능으로는 수행 할 수 없습니다.)
KRyan

URL 변경은 어떻게합니까? 다시로드하지 않고 어떻게됩니까? 링크에서 '수정 된 페이지'(예 :)를 다시로드 /second하면 오류가 발생합니다. OP의 뉴스 사이트에서는 발생하지 않습니다. URL을 정확하게 변경하여 공유 할 수 있습니다.
OJFord

@OllieFord는 히스토리 API의 목적입니다. history.pushState그리고 history.replaceState현재 페이지에서 멀리 이동하지 않고 주소 표시 줄에 URL을 변경할 수 있습니다. #something히스토리 API를 사용하면 서버가 생성에 참여할 수있는 "실제"URL을 푸시 할 수 있고 프래그먼트가 완전히 지원되어야한다는 큰 장점을 가지고 URL 프래그먼트 ( ) 를 변경하는 기존의 트릭을보다 현대적으로 대체 합니다. 클라이언트 쪽에서.
홉스

아 알았어 그러나 내가 말했듯이 데모가 중단되어 혼란 스럽습니다.
OJFord

어떤 이유로 든이 질문이 나왔을 때 내가 익숙했던 역사 데모가 완전히 중단되었으므로 링크가 내가 찾은 첫 번째 링크였습니다. 더 나은 링크를 제안하십시오.
Ixrec 2016 년

20

무슨 일이 일어나고 있는지 이해하는 큰 열쇠 : 자바 스크립트를 통해 실제로 사용자를 리디렉션하지 않고 주소 표시 줄에 URL을 설정할 수 있습니다. 이것을 실제로 보려면 아래 코드를 지원되는 브라우저의 콘솔에 붙여 넣으십시오. 주소 표시 줄이로 바뀝니다 http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

이 방법의 장점은 사용자가 스토리를 스크롤 한 후 책갈피를 지정하면 책갈피가 사용자를 보낼 위치를 알게된다는 것입니다. DeviantArt의 무한한 검색 결과 스크롤은이 동작의 좋은 예입니다.


잠깐, DeviantArt는 검색 결과에 히스토리 수정을 구현 했으므로 실제로 특정 페이지에 링크 / 책갈피 / 다른 방식으로 기록 할 수 있습니까? 그건 ... 꽤 하지만 특정 검색어에 대해 특정 결과가 특정 페이지에 얼마나 오래 유지됩니까? 책갈피를 지정하면 내일 해당 페이지에서 동일한 결과가 표시되지 않을 것으로 예상됩니다.이를 조사해야합니다.
KRyan

@KRyan 그것은 단지 offset특정 거리를 결과 집합으로 건너 뛰는 매개 변수를 수정합니다 . 기본 정렬 순서는 "모든 시간에 인기있는"것으로 보이 므로 결과는 다소 안정적이지만 정렬 순서를 "최신"으로 전환하고 인기있는 항목을 검색하면 확실히 그렇지 않습니다.
홉스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.