JavaScript를 사용하여 페이지를 다시로드하는 방법


873

JavaScript를 사용하여 페이지를 다시로드하려면 어떻게합니까?

모든 브라우저에서 작동하는 방법이 필요합니다.

답변:


946

자바 스크립트 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry

자바 스크립트 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

자바 스크립트 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.

81
'true'는 서버에서 페이지를 강제로 다시로드합니다. 'false'는 사용 가능한 경우 캐시에서 다시로드됩니다.
barro32

3
.reload(true)역사에 추가 됩니까 ? 그렇다면 다시로드로 어떻게 피할 수 있습니까?
johntrepreneur

12
다음은 문서에 대한 링크입니다. developer.mozilla.org/en-US/docs/Web/API/window.location
Justin Ethier

1
이것이 가장 좋은 대답이며 맨 위에 있어야합니다. 다른 기능에 대한 내 문제는 서버의 콘텐츠로 페이지를 새로 고치지 않고 대신 캐시를 사용하지 않았기 때문에 JavaScript 1.2 솔루션이 나에게 가장 적합하고 유일한 솔루션이었습니다.
Ryan Coolwebs

8
.reload (true) 또는 .reload (false)는 내 IDE 및 github.com/Microsoft/TypeScript/issues/28898 에 따라 더 이상 사용되지 않습니다. 이제 .reload ()를 사용해야합니다
danday74

388
location.reload();

자세한 내용은이 MDN 페이지 를 참조하십시오.

이후에 새로 고침을 수행 onclick한 후 바로 false를 반환해야합니다.

location.reload();
return false;

22
사이의 차이가 무엇인가 location.reload()와는 window.location.reload()?
랩터

53
@ShivanRaptor 보통 아무도, 웹 브라우저의 맥락에서 location와 동일하지 않습니다 window.location같은 window글로벌 개체입니다.
Lekensteyn

1
return false;링크의 클릭시 이것을 호출하는 것을 잊지 마십시오 .
Rimian

2
나는 지역 변수 일 수 있기 때문에 window.location.reload();가독성을 선호합니다. 그러나 location보통 name의 변수는 피할 것 window입니다.
Yeti

217

다음은 가장 쉬운 JavaScript를 사용하여 페이지를 다시로드하는 535 가지 방법location = location 입니다.

이들은 처음 50입니다 :

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
self.location.replace(location)
location['assign'](location)
location['replace'](location)
window.location['assign'](location)
window.location['replace'](location)
window['location'].assign(location)
window['location'].replace(location)
window['location']['assign'](location)
window['location']['replace'](location)
self.location['assign'](location)
self.location['replace'](location)
self['location'].assign(location)
self['location'].replace(location)
self['location']['assign'](location)
self['location']['replace'](location)
location.href = location
location.href = location.href
location.href = window.location
location.href = self.location
location.href = window.location.href
location.href = self.location.href
location.href = location['href']
location.href = window['location']
location.href = window['location'].href
location.href = window['location']['href']
location.href = window.location['href']
location.href = self['location']
location.href = self['location'].href
location.href = self['location']['href']
location.href = self.location['href']
...

84
흥미롭지 만 혼란 스러워요
Arun Prasad ES

14
또한 자바 스크립트의 특징을 강조합니다 :)
Jeremy Thille

52
위치를 변경하기 위해 여러 가지 구현이 있음을 보여주기 때문에 개인적 으로이 답변을 싫어합니다. 이러한 방식은 자바 스크립트에서 함수를 실행하거나 속성에 액세스하는 다양한 방식의 순열입니다. 페이지를 새로 고침하는 다른 방법은 없습니다.
여호수아 베렌스

41
물론 더 많은 것이 있습니다 :window.window.window['window'].location = window['window'].window['window']['window']['window']['window']['window']['window']['location']
Renato

84

을 사용하여이 작업을 수행 할 수 있습니다 window.location.reload();. 여러 가지 방법이 있지만 JavaScript를 사용하여 동일한 문서를 다시로드하는 것이 좋습니다. 여기에 설명이 있습니다

JavaScript window.location객체를 사용할 수 있습니다

  • 현재 페이지 주소를 얻는 방법 (URL)
  • 브라우저를 다른 페이지로 리디렉션
  • 같은 페이지를 다시로드

window: JavaScript에서 :는 브라우저에서 열린 창을 나타냅니다.

location: JavaScript에는 현재 URL에 대한 정보가 있습니다.

location목적의 단편처럼 window오브젝트와 통해 호출 window.location속성.

location 객체에는 세 가지 방법이 있습니다.

  1. assign(): 새 문서를로드하는 데 사용
  2. reload(): 현재 문서를 다시로드하는 데 사용
  3. replace(): 현재 문서를 새 문서로 바꾸는 데 사용

따라서 여기서는 reload()동일한 문서를 다시로드하는 데 도움이 될 수 있으므로를 사용해야 합니다.

그래서처럼 사용하십시오 window.location.reload();.

jsfiddle의 온라인 데모

브라우저가 캐시가 아닌 서버에서 직접 페이지를 검색하도록 요청하려면에 true매개 변수를 전달하면 됩니다 location.reload(). 이 방법은 IE, Chrome, Firefox, Safari, Opera를 포함한 모든 주요 브라우저와 호환됩니다.


2
아하! replace()쿼리 문자열을 약간 변경하여 페이지를 다시로드해야하기 때문에 내가 찾고있는 솔루션으로 판명되었습니다.
Bernard Hymmen

w3schools에서 : "assign ()과 replace ()의 차이점은 replace ()가 문서 히스토리에서 현재 문서의 URL을 제거한다는 것입니다. 즉,"뒤로 "단추를 사용하여 원본 문서. "
pasaba por aqui

54

시험:

window.location.reload(true);

'true'로 설정된 매개 변수는 서버에서 새 사본을 다시로드합니다. 그것을 떠나면 캐시에서 페이지를 제공합니다.

자세한 내용은 MSDNMozilla 설명서를 참조하십시오 .


1
외부 웹 페이지 www.xyz.com/abc를 새로 고치려면 어떻게합니까?
DoIt

@Dev : 나중에 언급 한대로 "바꾸기"를 시도해야합니다.
Jean Paul AKA el_vete

@Orane : 나는 op의 질문을 만족시키기 위해 많은 옵션을 제공하기 위해이 답변의 단순성과 수완을 모두 좋아합니다. 렌더링을위한 자체 JS 엔진이 있습니다 ... 질문은 매우 일반적이며 웹 참조 : " phpied.com/files/location-location/location- location.html "은이 질문에 대한 완전한 답변을 충족시킬 수 있습니다. 그러나 이것은 나를 도와주었습니다.)
Jean Paul AKA el_vete

1
아직도 그래요? 두 링크 모두 재로드에 대한 매개 변수를 언급하지 않습니다.
Rüdiger Schulz

50

method="post"양식 을 제출 한 후 POST 요청으로 검색된 페이지에서 다시로드와 관련된 정보를 찾고있었습니다 .

POST 데이터를 유지 하는 페이지를 다시로드하려면 다음을 사용하십시오.

window.location.reload();

POST 데이터를 버리고 (GET 요청 수행) 페이지를 다시로드하려면 다음을 사용하십시오.

window.location.href = window.location.href;

바라건대 이것은 다른 사람들이 같은 정보를 찾는 데 도움이되기를 바랍니다.


POST요청으로 검색 한 문서를 다시로드하는 것에 대한 참조를 포함한 답변에 감사드립니다 .
Christopher Schultz

GETPOST방법의 좋은 구분
Hassan Baig

이 답변은 너무 멀리 떨어졌습니다!
Greg Randall

1
window.location.href = window.location.href현재 URL에가 포함되어 있으면 페이지를 다시로드하지 않습니다 #. 필요하지 않은 경우 해시를 제거 할 수 window.location.href = window.location.href.split('#')[0];있습니다.
롤랜드 스타크

40

JavaScript를 사용하여 페이지를 다시로드하려면 다음을 사용하십시오.

window.location.reload();

37

이것은 나를 위해 작동합니다 :

function refresh() {    
    setTimeout(function () {
        location.reload()
    }, 100);
}

http://jsfiddle.net/umerqureshi/znruyzop/


이것은 서버 측에서 루프 조건을 피하기 때문에 나에게 바람직하다
ILMostro_7

1
새로 고치기 전에 여전히보고 싶은 메시지가 있기 때문에 시간 초과 기능을 포함시키는 것이 특히 좋습니다. 명성!
Matt Cremeens

다른 값을 setTimeout 함수의 두 번째 인수로 설정할 수는 있지만 작동하지 않고 다시로드가 즉시 발생합니다. 어떻게 해결합니까?
O.Kuz

1
@ O.Kuz는 그렇게 생각하지 않습니다. 값을 5000ms로 설정하면 5 초 후에 다시로드가 수행됩니다. 참조 jsfiddle.net/umerqureshi/znruyzop/446
umer

1
내 코드에서 실수를 찾아야합니다.) 감사합니다!
O.Kuz

15

넣으면

window.location.reload(true);

해당 코드가 실행되는 이유를 규정하는 다른 조건이없는 페이지 시작 부분에서 브라우저를 닫을 때까지 페이지가로드 된 다음 계속 다시로드됩니다.


글쎄, 또는 다른 URL을 열 때까지. 브라우저의 지속적인 페이지 (재)로드 처리 능력에 달려있을 것입니다.
adamdunson

잘 말한대로 어디에 두 었는지에 따라 다릅니다. 여기서는 아마도 앵커 태그가 페이지를 다시로드하는 것과 같은 동작을 실행하는 직관적 인 요소가 아니라는 것을 언급하고 있습니다. 제안 : 우리는 onclick 이벤트를 수행하기 위해 다른 UI 객체를 대상으로 사용합니다. css로 장식하는 경우와 같이 div를 대상으로 지정하여 페이지가로드 된 후 jQuery 에서이 작업을 수행 할 수 있습니다. 이러한 맥락에서 입력 유형 버튼이 아닌 버튼이 있습니다. 백엔드 앱에 인수를 전달할 계획이 아닌 경우 더 적합합니다.
Jean Paul AKA el_vete

IE : <button onclick = "javascript : window.location.reload (true);"
Jean Paul AKA el_vete

11
location.href = location.href;

5
최신 브라우저는 href가 변경되지 않으므로 다시로드 할 필요가 없으므로 이것을 무시합니다. 당신은 다시로드하지 않고 단지 오래된 브라우저에 대한 페일 오버로 사용한다 : (location.reload location.reload () : 같이 location.href = 같이 location.href)
라덱의 일로

@RadekPech 어떤 오래된 브라우저가 location.reload()없습니까?
Matthias

8

쉽고 간단하게하려면을 사용하십시오 location.reload(). location.reload(true)서버에서 무언가를 가져 오려는 경우 에도 사용할 수 있습니다 .


8

버튼을 사용하거나 "a"(앵커) 태그 안에 넣으십시오.

<input type="button" value="RELOAD" onclick="location.reload();" />

다른 요구에 대해서는 다음을 시도하십시오.

Location Objects has three methods --

assign() Used to load a new document
reload() Used to reloads the current document.
replace() Used to replace the current document with a new one

1
흥미로운 ... <button> </ button>은 어떻습니까? 동일하게 작동합니까?
Jean Paul AKA el_vete 2016 년

1
그것은 매력처럼 작동했습니다! 아래 답변을 참조하십시오 :) 감사합니다
Jean Paul AKA el_vete 2016 년


4

20 초 후 자동 재로드 페이지.

<script>
    window.onload = function() {
        setTimeout(function () {
            location.reload()
        }, 20000);
     };
</script>

4

이 게시물은 제안 된 답변으로 페이지를 다시로드 할뿐만 아니라 jQuery UI 아이콘을 버튼에 배치하는 아이디어를 제공하는 데 도움이되었습니다.

<button style="display:block; vertical-align:middle; height:2.82em;"
        title="Cargar nuevamente el código fuente sin darle un [Enter] a la dirección en la barra de direcciones"
        class="ui-state-active ui-corner-all ui-priority-primary" 
        onclick="javascript:window.location.reload(true);">
    <span style="display:inline-block;" class="ui-icon ui-icon-refresh"></span>
    &nbsp;[<b>CARGAR NUEVAMENTE</b>]&nbsp;
</button>

프로젝트에 포함되었을 때의 모습을 보여주기 위해 편집

2016-07-02

이것은 jQuery UI, Themeroller, Icons 프레임 워크, jQuery 탭과 같은 메소드를 사용하는 것을 의미하는 개인 프로젝트이지만 사과입니다.)


@Peter Mortensen : 편집 해 주셔서 감사합니다. 프로젝트 프로토 타입은 대학에서 제작되었으므로 첨부 된 스크린 샷에서 스페인어로 작성해야했습니다. 사과드립니다. 물론 jQuery UI 관련 핵심이 필요했습니다. --- 예를 들어 ThemeRoller 위젯 jqueryui.com/themeroller 와 같은 플러그인 및 plugins.jquery.com/qTip2 , datatables.net .. jQuery 라이브러리 자체 등과 같은 플러그인 . 위의 응답 중 일부를 기반으로 작업이 수행되었습니다. onclick = "javascript : window.location.reload (true);">!
Jean Paul AKA el_vete

3

이것은 작동해야합니다 :

window.location.href = window.location.href.split( '#' )[0];

또는

var x = window.location.href;
x = x.split( '#' );
window.location.href = x[0];

다음과 같은 이유로 이것을 선호합니다.

  • # 다음 부분을 제거하여 페이지가있는 컨텐츠를 다시로드하지 않는 브라우저에서 페이지를 다시로드합니다.
  • 최근에 양식을 제출하면 마지막 내용을 다시 게시 할 것인지 묻지 않습니다.
  • 최신 브라우저에서도 작동합니다. Lasted Firefox 및 Chrome에서 테스트되었습니다.

또는이 작업에 최신 공식 방법을 사용할 수 있습니다

window.location.reload()

3

이 버튼을 사용하여 페이지를 새로 고침

데모

<input type="button" value="Reload Page" onClick="document.location.reload(true)">

2

reload () 메소드는 현재 문서를 다시로드하는 데 사용됩니다.

reload () 메소드는 브라우저의 재로드 버튼과 동일합니다.

기본적으로 reload () 메소드는 캐시에서 페이지를 다시로드하지만 forceGet 매개 변수를 true : location.reload (true)로 설정하여 서버에서 페이지를 다시로드하도록 할 수 있습니다.

        location.reload();

-3

간단하게 사용할 수 있습니다

window.location=document.URL

여기서 document.URL은 현재 페이지 URL을 가져오고 window.location은이를 다시로드합니다.


2
최신 브라우저는 href가 변경되지 않으므로 다시로드 할 필요가 없으므로 이것을 무시합니다. 당신은 다시로드하지 않고 단지 오래된 브라우저에 대한 페일 오버로 사용한다 : (location.reload location.reload () : 위치 = document.URL?)
라덱의 일로
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.