Develop Reference

Load back to homepage on refresh

I have a single page website. If click one of the navbar tabs, lets say 'contact us' the site will scroll down to the contact section. The problem is, if I refresh the site now it will automatically scroll down to the contact section each time. I want the site to scroll to the top of the page every time I refresh. The reason this is happening is because the address bar is changed to ...index.html#contact-area.
I tried the code below but the site gets caught in an infinite refresh loop.
<script>
window.location.replace("index.html");
</script>
I also tried the following but it doesn't work. It starts to scroll up then stops.
<script>
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>

One option is to attach an event listener to the anchor instead, and instead of changing the page hash, call scrollIntoView on the #contact-area:
anchor.addEventListener('e', (e) => {
e.preventDefault(); // don't change page hash (unless JS disabled...)
document.querySelector('#contact-area').scrollIntoView();
});

Refresh the current page when i click the browser back button(chrome)

I want to refresh the current page when clicking browser back button, it refreshes the same page but the page is refreshed even when I click logout button in the same page. Please give me valuable solution. Thanks in advance
window.addEventListener('popstate', function (event) {
if (window.event) {
location.reload(true);
}
}

Friend you can not play with the browser function to go back. But you can add in the function of close session the following code
location.reload();
You can also place an event that triggers the same function that will reload the page
And if you want to redirect to another url you can use the following code
window.location.replace("http//:URL.COM");

Javascript do not reload parent

So I'm working on a project. This includes a div which I've loaded in with jQuerys' .load(). Now I want to refresh that every 10 seconds. So in the loaded page, I've done the following:
<script type="text/javascript">
setTimeout(function(){
location.reload(1);
}, 10000);
</script>
But for some reason, this reloads not only the frame, but also the parent. I've also tried to reload the div which I'm loading into with the following code:
<script type="text/javascript">
$(document).ready(function() {
$("#radiostatusInner").load("/public/assets/scripts/radiostatus.php");
var refreshId = setInterval(function() {
$("#radiostatusInner").load('/public/assets/scripts/radiostatus.php');
}, 10000);
$.ajaxSetup({
cache: false
});
});
</script>
But this gives me the same result...
Is there any way to resolve this issue?

location.reload() reloads the parent window, so unless your content is in an iframe (and you're targeting that iframe) that will always refresh the entire page.
The second snippet should work (remove the first snippet if it's still there), but it's not ideal. Your timer isn't aware of when the AJAX request will return.
Something like this would be better:
(function getRadioStatusInner() {
$("#radiostatusInner").load("/public/assets/scripts/radiostatus.php", function() {
setTimeout(getRadioStatusInner, 10000);
});
}());

The second snippet of code you've shown should work as you need, but you should remove the first snippet from the loaded page, because it will make the entire page reload once it gets loaded and appended to the DOM.
Only use the second snippet in your page and everything should work as expeced.

how can I navigate to page but ensure that the target page will be refreshed

I have a Login.html page from which I'm navigating to my Main.html
now when I;m doing a logout I want to navigate back to the login.html but I also want to ensure this page will be refreshed.
I don't want to disable the page cache, I just want only in this specific scenario to navigate it after refresh.
I tried the following:
window.location.replace but it doesn't refresh the page.
window.location.href - also doesn't refresh the page.
window.location.reload() - Refresh only the current page.
#Christof13 suggestion regarding passing a parameter is the only way I can see but it loading the page twice and it's very ugly,
any other suggestions?

How about setting a Timeout on the logout event? This way, the location reloads only once.
$("#myLogOutButtonOrLink").click(function() {
setTimeout(function(){
window.location.reload();
}, 1000);
});

My solution was using a global variable on the window scope as the following:
on main.html:
window.globals.RefreshRequired = true
on Login.html:
if (window.globals && window.globals.RefreshRequired) {
window.location.reload();
}
In this way the refresh will be done if I already visited main.html during the current browser instance.

Stopping javascript running when a link is clicked

I was wondering if it is possible to stop javascript running on a page when a link is clicked. The problem i am having is the pages refreshes every 30 seconds (A list needs to be up to date on the site) But if a user clicks a link from the list and before that has finished loading the 30 second refresh begins, it stops the link from opening and instead refreshes the page.
Here is the script that is running,
<script type="text/javascript">
window.name = "NewRegistration";
setTimeout("location.reload(true);",30000);
</script>
The link is to another page on the site.
If anything is not clear please ask.
Thanks,
Jack.

<script type="text/javascript">
var id;
function stopRefresh()
{
window.clearTimeout(id);
}
window.name = "NewRegistration";
id = window.setTimeout("location.reload(true);",30000);
</script>
Some Link
If you're using jQuery, this is much easier to apply to all the links on the page:
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
stopRefresh();
});
});
</script>

You don't have to stop all the javascript on the Page.
You have to work on your refreshing page function. For example you can set a flag to false when a link is clicked.
After 30sec
if (flag == false) do not refresh the page
else
refresh the page
That's all :)

The most common way of doing this these days is to update in the background without reloading the entire page, though that's a bit more work to set up. Read up on Ajax to learn more.
A solution that is simpler to implement is to... well, Sean Bright already beat me to that just now I see ;)