etc./StackOverFlow

페이지를 새로고침하지 않고 URL을 수정하려면 어떻게 해야 합니까?

청렴결백한 만능 재주꾼 2021. 11. 5. 23:10
반응형

질문자 :Robin Rodricks


페이지를 새로고침하지 않고 현재 페이지의 URL을 수정할 수 있는 방법이 있습니까?

가능하면 # 해시 앞 부분에 액세스하고 싶습니다.

도메인 뒤 의 부분만 변경하면 되므로 도메인 간 정책을 위반하는 것은 아닙니다.

 window.location.href = "www.mysite.com/page2.php"; // Sadly this reloads


이제 Chrome, Safari, Firefox 4+ 및 Internet Explorer 10pp4+에서 이 작업을 수행할 수 있습니다!

자세한 내용은 이 질문의 답변을 참조하세요. 해시 없이 새 URL로 주소 표시줄 업데이트 또는 페이지 새로고침

예시:

 function processAjaxData(response, urlPath){ document.getElementById("content").innerHTML = response.html; document.title = response.pageTitle; window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath); }

window.onpopstate 를 사용하여 뒤로/앞으로 버튼 탐색을 감지할 수 있습니다.

 window.onpopstate = function(e){ if(e.state){ document.getElementById("content").innerHTML = e.state.html; document.title = e.state.pageTitle; } };

브라우저 기록 조작에 대한 자세한 내용은 이 MDN 문서를 참조하십시오 .


David Murdoch

HTML5는history.pushState() 및 history.replaceState() 메서드를 도입하여 각각 기록 항목을 추가하고 수정할 수 있습니다.

 window.history.pushState('page2', 'Title', '/page2.php');

여기에서 자세히 읽어 보세요.


Vivart

URL을 변경하고 싶지만 브라우저 기록에 항목을 추가하고 싶지 않은 경우 HTML5 replaceState를 사용할 수도 있습니다.

 if (window.history.replaceState) { //prevents browser from storing history with each change: window.history.replaceState(statedata, title, url); }

이것은 뒤로 버튼 기능을 '중단'합니다. 각 이미지에 고유한 URL을 부여하면서 이미지 갤러리(본 모든 이미지를 뒤로 이동하는 대신 뒤로 버튼을 갤러리 인덱스 페이지로 돌아가게 하려는 경우)와 같은 일부 경우에 필요할 수 있습니다.


George Filippakos

다음은 내 솔루션입니다(newUrl은 현재 URL로 바꾸려는 새 URL입니다).

 history.pushState({}, null, newUrl);

Haimei

참고: HTML5 브라우저로 작업하는 경우 이 답변을 무시해야 합니다. 이것은 다른 답변에서 볼 수 있듯이 이제 가능합니다.

페이지를 다시 로드하지 않고 브라우저 에서 URL 을 수정할 수 있는 방법은 없습니다. URL은 마지막으로 로드된 페이지를 나타냅니다. 변경하면( document.location ) 페이지가 다시 로드됩니다.

한 가지 분명한 이유는 www.mysite.com 에 은행 로그인 페이지처럼 보이는 사이트를 작성하기 때문입니다. 그런 다음 브라우저 URL 표시줄을 www.mybank.com 변경합니다. www.mysite.com 보고 있다는 사실을 전혀 인식하지 못합니다.


Robin Day

parent.location.hash = "hello";

Steve

최신 브라우저와 HTML5 에는 창 history pushState 라는 메서드가 있습니다. 그러면 URL이 변경되고 페이지를 로드하지 않고 기록으로 푸시됩니다.

다음과 같이 사용할 수 있습니다. 3개의 매개변수, 1) 상태 객체 2) 제목 및 URL):

 window.history.pushState({page: "another"}, "another page", "example.html");

이렇게 하면 URL이 변경되지만 페이지가 새로고침되지는 않습니다. 또한 페이지가 존재하는지 확인하지 않으므로 URL에 반응하는 JavaScript 코드를 수행하면 다음과 같이 작업할 수 있습니다.

또한 새 기록을 만드는 대신 현재 기록을 수정한다는 점을 제외하고 정확히 동일한 작업을 수행하는 history.replaceState()

history.pushState 가 존재하는지 확인하는 함수를 만들고 나머지는 다음과 같이 계속할 수 있습니다.

 function goTo(page, title, url) { if ("undefined" !== typeof history.pushState) { history.pushState({page: page}, title, url); } else { window.location.assign(url); } } goTo("another page", "example", 'example.html');

또한 페이지를 다시 로드하지 않는 <HTML5 browsers 용 # 을 변경할 수 있습니다. 이것이 Angular가 해시태그에 따라 SPA 를 수행하는 방식입니다...

# 변경은 다음과 같이 매우 쉽습니다.

 window.location.hash = "example";

그리고 다음과 같이 감지할 수 있습니다.

 window.onhashchange = function () { console.log("#changed", window.location.hash); }

Alireza

Vivart와 geo1701이 이미 언급했듯이 HTML5 replaceState가 답입니다. 그러나 모든 브라우저/버전에서 지원되지는 않습니다. History.js는 HTML5 상태 기능을 래핑하고 HTML4 브라우저에 대한 추가 지원을 제공합니다.


Thomas Stjernegaard Jeppesen

HTML5 이전에는 다음을 사용할 수 있습니다.

 parent.location.hash = "hello";

그리고:

 window.location.replace("http:www.example.com");

이 방법은 페이지를 다시 로드하지만 HTML5는 페이지를 다시 로드해서는 안 history.pushState(page, caption, replace_url)


Shine

당신이 하려는 것이 사용자가 페이지를 북마크/공유할 수 있도록 하는 것이고 그것이 정확히 올바른 URL일 필요가 없고 다른 어떤 것에 해시 앵커를 사용하지 않는다면, 당신은 이것을 두 번에 할 수 있습니다 부속; 위치를 사용합니다. 위에서 논의한 해시를 입력한 다음 홈 페이지에서 검사를 구현하여 해시 앵커가 포함된 URL을 찾고 후속 결과로 리디렉션합니다.

예를 들어:

  1. 사용자는 www.site.com/section/page/4

  2. www.site.com/#/section/page/6 (해시 포함)으로 변경하는 몇 가지 작업을 수행합니다. 페이지 6에 대한 올바른 콘텐츠를 페이지에 로드하여 해시를 제외하고 사용자가 너무 방해받지 않도록 한다고 가정합니다.

  3. 사용자가 이 URL을 다른 사람에게 전달하거나 즐겨찾기에 추가합니다.

  4. 다른 사람 또는 나중에 동일한 사용자가 www.site.com/#/section/page/6

  5. 에 코드 www.site.com/ 로 사용자 리디렉션 www.site.com/section/page/6 이런 식으로 뭔가를 사용 :

    if (window.location.hash.length > 0){ window.location = window.location.hash.substring(1); }

그것이 의미가 있기를 바랍니다! 일부 상황에서 유용한 접근 방식입니다.


Jeremy Warne

다음은 페이지를 새로고침하지 않고 URL을 변경하는 기능입니다. HTML5에서만 지원됩니다.

 function ChangeUrl(page, url) { if (typeof (history.pushState) != "undefined") { var obj = {Page: page, Url: url}; history.pushState(obj, obj.Page, obj.Url); } else { window.location.href = "homePage"; // alert("Browser does not support HTML5."); } } ChangeUrl('Page1', 'homePage');

Suraj

이 아름답고 간단한 기능을 사용하여 애플리케이션의 어느 곳에서나 그렇게 할 수 있습니다.

 function changeurl(url, title) { var new_url = '/' + url; window.history.pushState('data', title, new_url); }

URL을 수정할 수 있을 뿐만 아니라 제목도 함께 업데이트할 수 있습니다.


Dheeraj Thedijje

URL 부분만 변경하는 것이 아닌 경우 위치( window.location 또는 document.location )가 변경되면 해당 새 URL에 대한 요청이 발생합니다. URL을 변경하면 URL도 변경됩니다.

현재 사용 중인 URL이 마음에 들지 않으면 Apache의 mod_rewrite 와 같은 서버 측 URL 재작성 기술을 사용하십시오.


Gumbo

앵커 태그를 추가할 수 있습니다. 나는 사람들이 페이지에서 방문하는 것을 Google Analytics로 추적할 수 있도록 내 사이트에서 이것을 사용합니다.

앵커 태그를 추가한 다음 추적하려는 페이지 부분을 추가하면 됩니다.

 var trackCode = "/#" + urlencode($("myDiv").text()); window.location.href = "http://www.piano-chords.net" + trackCode; pageTracker._trackPageview(trackCode);

Nate

Thomas Stjernegaard Jeppesen이 지적했듯이 사용자가 Ajax 링크 및 앱을 탐색하는 동안 History.js를 사용하여 URL 매개변수를 수정할 수 있습니다.

그 대답 이후 거의 1년이 지났고 History.js는 성장하고 더 안정적이고 크로스 브라우저가 되었습니다. 이제 HTML5 호환 및 많은 HTML4 전용 브라우저에서 기록 상태를 관리하는 데 사용할 수 있습니다. 이 데모에서는 작동 방식의 예를 볼 수 있습니다(또한 기능과 한계를 시험해 볼 수 있습니다.

이 라이브러리를 사용하고 구현하는 방법에 대한 도움이 필요하면 데모 페이지의 소스 코드를 살펴보는 것이 좋습니다. 매우 쉽게 수행할 수 있습니다.

마지막으로 해시(및 해시뱅) 사용에 대한 문제에 대한 포괄적인 설명은 Benjamin Lupton의 이 링크를 확인하십시오.


Erenor Paz

HTML 5 History API에서 history.pushState() 를 사용합니다.

자세한 내용은 HTML5 History API 를 참조하세요.


Prathamesh Rasam

새 URL입니다.

 let newUrlIS = window.location.origin + '/user/profile/management';

어떤 의미에서 pushState()를 호출하는 것은 window.location = "#foo"를 설정하는 것과 비슷합니다. 둘 다 현재 문서와 연결된 다른 기록 항목을 생성하고 활성화한다는 점입니다. 그러나 pushState()에는 몇 가지 장점이 있습니다.

 history.pushState({}, null, newUrlIS);

루트를 확인할 수 있습니다: https://developer.mozilla.org/en-US/docs/Web/API/History_API


Vinay Kaithwas

이 코드는 저에게 효과적입니다. 나는 그것을 ajax의 내 응용 프로그램에 사용했습니다.

 history.pushState({ foo: 'bar' }, '', '/bank');

페이지가 ajax를 사용하여 ID로 로드되면 페이지를 다시 로드하지 않고 브라우저 URL이 자동으로 변경됩니다.

이것은 아래의 ajax 함수입니다.

 function showData(){ $.ajax({ type: "POST", url: "Bank.php", data: {}, success: function(html){ $("#viewpage").html(html).show(); $("#viewpage").css("margin-left","0px"); } }); }

예: "대시보드"와 같은 페이지 또는 컨트롤러에서 은행을 클릭하면 페이지를 다시 로드하지 않고 ajax 코드를 사용하여 은행 목록을 로드합니다. 이때 브라우저 URL은 변경되지 않습니다.

 history.pushState({ foo: 'bar' }, '', '/bank');

그러나 이 코드를 ajax에 사용하면 페이지를 다시 로드하지 않고 브라우저 URL이 변경됩니다. 이것은 아래의 전체 아약스 코드입니다.

 function showData(){ $.ajax({ type: "POST", url: "Bank.php", data: {}, success: function(html){ $("#viewpage").html(html).show(); $("#viewpage").css("margin-left","0px"); history.pushState({ foo: 'bar' }, '', '/bank'); } }); }

Webdeveloper011

이것은 새로고침 없이 탐색하는 데 필요한 전부입니다.

 // add setting without reload location.hash = "setting"; // if url change with hash do somthing window.addEventListener('hashchange', () => { console.log('url hash changed!'); }); // if url change do somthing (dont detect changes with hash) //window.addEventListener('locationchange', function(){ // console.log('url changed!'); //}) // remove #setting without reload history.back();


Omar bakhsh Twitter MomoAmoory

간단히 사용하면 페이지가 다시 로드되지 않고 URL만 다시 로드됩니다.

 $('#form_name').attr('action', '/shop/index.htm').submit();

James Bond

출처 : http:www.stackoverflow.com/questions/824349/how-do-i-modify-the-url-without-reloading-the-page

반응형