Refresh body on-click to achieve anywhere page refreshing?
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Here's a link to a JSfiddle with a basic button linking to the root directory; what I'd like is to refresh when I click anywhere in the page (e.g. body, or I guess HTML)?

I've tried using JS to select various selectors, but haven't had any luck. Please let me know if you have any questions. Thanks.

Super curious if you could share the use case of this?
Qdev 1 month ago
@Qdev Hi, I wanted to be able to refresh the page by clicking anywhere to simplify the refreshing of data called from a script
sharper 1 month ago
awarded to ivankahl

Crowdsource coding tasks.

5 Solutions


If you want pure JS without the Jquery, the below is a working solution:

https://jsfiddle.net/8x12uw0d/2/


document.body.onclick = () => document.location = document.location
When the body is clicked, run a function to set the URL to the current URL.


Hi there,

i have drafted a demo with a refreshing solution, and showing all the best methods that could reload a web page when clicking body.

demo link: https://codepen.io/chlegou/pen/ZEGEZjE

Here is the full code source of the demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Reload</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body onclick="history.go(0);">
<br/>
<h3>Test Reload:</h3>
<br/>
<p>This is a random number: <span id="random"></span></p>

<br/><br/><br/><br/><br/>
<h3>Refresh Methods:</h3>
<p><code>history.go(0)</code> :: GOOD</p>
<p><code>window.location = window.location</code> :: GOOD</p>
<p><code>location.reload()</code> :: GOOD (the same as "history.go(0)"), but deprecated</p>
<p><code>location.reload(true)</code> :: The Best (force reloading from the server), but deprecated</p>


<script>
    var randomValue = Math.random();
    document.getElementById('random').innerHTML = randomValue;
    console.log(randomValue);
</script>

</body>
</html>
Winning solution

This is relatively simple and short to implement in Javascript (no need for jQuery or any other JS library). You just need to add an onclick event to the <body> which will execute history.go(0);.

There is a catch that you need to be aware of concerning the size of the html and body tags: they need to be full width and height for this to work properly otherwise the onclick event will only work where there is cotent. See the code below (there is also an interactive CodePen example here).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Click Anywhere To Refresh</title>
        <style>
            /* Make sure that the body and html element have full width and height */
            html, body {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <!-- Magic happens here -->
    <body onclick="history.go(0);">
        <h1>Click anywhere on the page to refresh</h1>
        <p>Page loaded at: <span id="time" style="font-style:italic;"></span></p>

        <script type="text/javascript">
            // Don't worry about this. Just to show the current time when the page was loaded
            document.addEventListener("DOMContentLoaded", function() {
                document.querySelector("#time").innerHTML = new Date().toString();
            });
        </script>
    </body>
</html>
Hi & thank you for this concise but detailed solution. I appreciate it (and anyone else that answered)!
sharper 1 month ago
View Timeline