클릭 시 페이지를 새로 고치는 버튼

클릭 시 페이지를 새로 고치는 버튼

사용자가 클릭하면 페이지가 새로워지는 버튼이 필요합니다.나는 이것을.

<input type="button" value="Reload Page" onClick="reload">

아니면

<input type="button" value="Refresh Page" onClick="refresh">

하지만 둘 다 효과가 없었습니다.

사용하다onClick와 함께window.location.reload(), 예:

<button onClick="window.location.reload();">Refresh Page</button>

아니면history.go(0), 예:

<button onClick="history.go(0);">Refresh Page</button>

아니면window.location.href=window.location.href'전체' 재로드의 경우:

<button onClick="window.location.href=window.location.href">Refresh Page</button>

---

버튼 요소 - developer.mozilla.org

이것은 저에게 효과가 있습니다.

function refreshPage(){
    window.location.reload();
} 

<button type="submit" onClick="refreshPage()">Refresh Button</button>

여기 있는 모든 답들이 인라인을 이용한다는 것을 알아챘습니다.onClick조련사들.일반적으로 HTML과 자바스크립트는 따로 보관하는 것이 좋습니다.

클릭 이벤트 청취자를 버튼에 직접 추가하는 답변이 있습니다.클릭하면 location.reload가 호출되고 페이지가 현재 URL로 다시 로드됩니다.

const refreshButton = document.querySelector('.refresh-button');

const refreshPage = () => {
  location.reload();
}

refreshButton.addEventListener('click', refreshPage)

.demo-image {
  display: block;
}

<button class="refresh-button">Refresh!</button>
<img class="demo-image" src="https://picsum.photos/200/300">

<a onClick="window.location.reload()">Refresh</a>

이건 정말 제게 딱 맞아요.

이 페이지만 실제로 다시 로드(오늘)

<input type="button" value="Refresh Page" onClick="location.href=location.href">

다른 것들은 정확히 다시 로드하지 않습니다.텍스트 상자 안에 값을 저장합니다.

비록 질문은 다음에 대한 것이지만.button, 만약 누군가가 페이지를 새로 고치고 싶다면<a>, 당신은 간단히 할 수 있습니다.

<a href="./">Reload</a>

클릭 시 페이지를 새로 고치는 버튼

window.location.reload()에서 클릭 버튼 사용:

<button onClick="window.location.reload();">

다음과 같은 링크에 빈 참조를 만듭니다.

 <a href="" onclick="dummy(0);return false;" >

<button onclick=location=URL>Refresh</button>

이게 웃기게 보일 수도 있지만 정말 효과가 있습니다.

<button onClick="window.location.reload();">Reload</button>

또는 사용할 수도 있습니다.

<form action="<same page url>" method="GET">
<button>Reload</button>
</form>

참고: 변경"<same page link>"다시 로드할 동일한 페이지의 url을 사용합니다.예를 들어 다음과 같습니다.<form action="home.html> method="GET">

같은 페이지를 다시 로드할 때는 이 방법을 사용해도 괜찮습니다.

<button onClick="window.location.reload();">

웹 사이트를 설계할 때는 항상 컨텐츠 보안 정책 및 비활성화된 자바스크립트 사용자를 위한 모범 사례를 고려하는 것이 중요합니다.

-인라인 스크립트는 다음과 같습니다.onClick취약성입니다.

-무시무시<noscript>숨겨진 요소를 태그하고 스타일링한 다음 JS를 사용하여 변경합니다.display:다시 각 스타일로 돌아가 사용자가 JS를 활성화하도록 합니다.

이것은 모든 상황에서 가장 간단한 해결책입니다.

<a href="/">Reload Page</a>

   <script>
    function locationreload() {
        location.reload();
          
    }
   </script>

    <button type="submit" onclick="return confirm('Do you really want to refresh your page?') , locationreload();" class="btn btn-success">Refresh</button>

양식 재설정을 원하는 경우:

<input type="reset" value="Reset Form Values"/>

또는 브라우저에서 처리하지 않는 양식의 다른 측면을 재설정합니다.

<input type="reset" onclick="doFormReset();" value="Reset Form Values"/>

jQuery 사용하기

function doFormReset(){
    $(".invalid").removeClass("invalid");
}

<button type="submit" onclick="refresh">refresh</button>

이거 나한테 통했어요!

자바스크립트를 사용하고 싶지 않아서 '숨겨진 양식'을 사용하는 방법을 생각해 냈습니다.예는 다음과 같습니다.

<form method="get" accept-charset="utf-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <input type="submit" value="Read">
  <input type="submit" value="Reload" form="hidden_form">
</form>

<form id="hidden_form" method="get"></form>

Js는 필요없으며, 양식 태그에 버튼 태그를 넣을 수 있습니다.

<form>  
  <button class="restart-btn">Restart</button>
</form>

시험해보고 의견을 말해봐요!

"reload"와 "refresh"는 자바스크립트 함수가 아닙니다.다음 코드를 사용해 보십시오.

function reload() {
  window.location.refresh();
}

<button onClick="reload()"></button>

언급URL : https://stackoverflow.com/questions/29884654/button-that-refreshes-the-page-on-click