페이지를 새로 고치지 않고 브라우저의 주소 표시 줄을 변경할 수있는 방법이 있습니까?


91

웹 앱을 개발 중입니다. 여기에는 사용자가 카테고리 중 하나를 클릭 할 때마다 업데이트 패널이 적절한 콘텐츠를로드하는 카테고리라는 섹션이 있습니다.

사용자가 카테고리를 클릭 한 후 브라우저의 주소 표시 줄 URL을 변경하고 싶습니다.

www.mysite.com/products 

같은 것에

www.mysite.com/products/{selectedCat} 

페이지를 새로 고치지 않고
이를 위해 사용할 수있는 JavaScript API가 있습니까?

답변:


157

HTML5를 사용하면 다시로드하지 않고도 URL을 수정할 수 있습니다.

브라우저의 기록에 새 게시물을 작성하려는 경우 (즉, 뒤로 버튼이 작동 함)

window.history.pushState('Object', 'Title', '/new-url');

돌아 가지 않고 URL 만 변경하려면

window.history.replaceState('Object', 'Title', '/another-new-url');

객체는 ajax 탐색에 사용할 수 있습니다.

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

자세한 내용은 http://www.w3.org/TR/html5-author/history.html을 참조하십시오.

대체 솔루션 : https://github.com/browserstate/history.js


4
+1 또한 참고하십시오. URL path및 / 또는 query stringURL을 변경합니다 . 프로토콜, 도메인 또는 포트를 변경할 수 없습니다 (다른 사람들이 지적했듯이 보안 문제가 될 것입니다). hash위 의 함수는 앵커 (또는 조각 ID)를 변경할 수 있습니다.
Chris S

2
단지 말, 당신의 예에서 '/ 아이템 / 35'}} 추가 여분이
Zhanger

부수적 인 질문으로 이러한 URL을 Google에서 색인화 할 수있는 방법이 있습니까?
Peter Featherstone

1
더 나은 라이브러리는 github.com/browserstate/history.js보이며 적극적으로 유지 관리되고 널리 사용되는 반면 fortes-history.js는 3 년 동안 유휴 상태였습니다.
Gonfi den Tschal 2013

2
firefox는 제목을 지원하지 않으므로 document.title = "new title"을 사용하십시오.
0fnt

31

사람들이 이미 말한 내용을 추가하려면 onclick 함수에서 원하는 URL과 일치하도록 window.location.hash 속성을 편집하십시오.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

URL에서 '#'기호없이 URL을 변경하는 방법이 있습니까?
SHEKHAR SHETE

7

URL로 이동하지 않고 주소 표시 줄을 완전히 다른 URL로 직접 조작하는 것은 보안상의 이유로 허용되지 않는다고 생각합니다.

www.mysite.com/products/#{selectedCat}

즉, 동일한 페이지 내의 앵커 스타일 링크는 현재 대부분의 자바 스크립트 라이브러리에있는 다양한 히스토리 / "뒤로 버튼"스크립트를 살펴 봅니다.

업데이트 패널에 대한 언급은 당신이 asp.net을 사용하고 있다고 생각하게 만듭니다.이 경우 asp.net ajax 히스토리 컨트롤은 시작하기에 좋은 곳입니다.


3

저는 이것이 가능하지 않다고 생각합니다 (적어도 완전히 다른 주소로 변경). 주소 표시 줄의 직관적이지 않은 오용이고 피싱 공격을 조장 할 수 있기 때문입니다.


직관적이지 않기보다는 피싱 공격에 오용 될 수 있기 때문에 그렇게 할 수 없어야한다고 생각합니다. 어쨌든 그것은 +1입니다.
OregonGhost

예, 저에게 방금 발생했습니다. 좋은 생각이 아닙니다. 감사합니다 OregonGhost.
Galwegian

1
나는 당신이 주변지도를 드래그, URL이 변경됩니다 ... Wikimapia에서 밖으로 그것의 가능한 ... 확인을 생각 ...
Shivasubramanian

@ Shivasubramanian-a : Wikimapia를 살펴 봤는데 실제로 somej가 제안하고 sanchothefat가 설명하는 기술을 사용합니다. 앵커 이름 만 변경하는 것입니다. 피싱으로부터 안전합니다 ...
PhiLho

-1

이것은 당신이 말하는 방식으로 할 수 없습니다. somej.net에서 제안한 방법이 가장 가깝습니다. 실제로 AJAX 시대에는 매우 일반적인 관행입니다. Gmail조차도 이것을 사용합니다.


-1

"window.location.hash"

sanchothefat가 제안한 것처럼 그것을하는 유일한 방법이어야합니다. 이 기능을 본 모든 장소에서 URL의 # 다음에 항상 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.