Load random HTML page on reload

html random image on refresh
refresh page html
display random div on page load
random image generator html
refresh page on button click html
javascript refresh element
jquery random image on page load
random image javascript w3schools

I have a bunch of different html pages, and need one to get randomly loaded on each page refresh. This is what I have so far, the only problem is I get stuck in an infinite refresh loop. How can I have this just load a single page on refresh?

  var sites = ['/one.html', '/two.html', '/three.html'];
  var randomUrl = sites[Math.floor(Math.random() * sites.length )];
  window.location.reload = randomUrl;

Thanks in advance!

If you are just writing a small not production learning page (because it is not good practise in my opinion). You could use a Cookie/localstorage/sessionstorage.

if(sessionStorage.getItem('loaded')===null){
   sessionStorage.setItem('loaded', '1');
   **YOUR CODE** 
}
else{
   /* remove if you just loaded a random page so it will work after the next reload */
   sessionStorage.removeItem('loaded')
}

I will you sessionStore because it will reset if the browser is closed but in fact, it doesn't really matter at this point.

Super simple way to randomly load new images on refresh via , Random Images on Refresh. <!DOCTYPE html> I'm using this to load a random image as my fixed background on my page load and it's working like a charm. Loading a Random HTML Page Inline - Page 1. by kirupa | 20 February 2011 Have questions? Discuss this HTML / JavaScript tutorial with others on the forums. Static is boring! One way of making your pages more dynamic is by loading content that is a little different, a little random each time.

You get an infinite loop because everytime the new page is loaded, the script is executed again and again and also because you have the same script loaded in each one of those html. You could have an event trigger to make it execute only after it happens, for example, a mouse click (example below) If you wish this random page to open only once, you may put the script only in the main page.

document.onclick = reloadpage;

function reloadpage() {
    var sites = ['/one.html', '/two.html', '/three.html'];
    var randomUrl = sites[Math.floor(Math.random() * sites.length )];
    window.open(randomUrl, "_self");
}

Random HTML5 Video on Page Load and Refresh : HTML, Basically you'll have to build up a storage with urls to your videos, randomly choose one url on page load and replace the url in your video src attribute. You'​re  The trick to reloading the page is to force the browser to not look into the cache, but rather to again make a connection to the Web and bring up the document from the server. Most people know it can be done by hand by holding the shift key and clicking the "Refresh" (on IE) or "Reload" (on Navigator) buttons.

Simple fix would be passing a parameter

window.location.reload = randomUrl + "?reload=0";

and check for reload=0 query param before you do

window.location.reload = randomUrl;

How To Display Random Div Content On Page Load or Refresh In , Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Super simple way to randomly load new images on refresh via Jquery and DOM injection. Great for banners. - Random Images on Refresh

Location reload() Method, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  (The reason for this is that I need to have a page with all quotes and no javascript, in case the user doesn't have javascript enabled in their browser. Then I will have a <noscript> tag containing a link for them to click through to view all the quotes).

JavaScript random() Method, myImages; //get size of array, randomize a number from this // use this number as -Random-image-on-refresh--> <meta http-equiv="Content-Type" content="text/​html; charset=utf-8"> <title>Display random image on page load</title> <script  The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. The onload event can also be used to deal with cookies (see "More Examples" below).

Random image on refresh? - JavaScript, Load a image: If you want to load a image when user refresh browser, you can simply call random() method and load the respective image there in the DAM, so we are just referring them in our page. Demo Test. HTML: <img id="myImage" /​>. Ultimately, a message pops up that “A Problem Occurred with this Webpage, so it was Reloaded.” Now, Safari is currently and completely unusable as the page reloads every five seconds. Oh, the agony and the defeat of a safari browser session gone wrong!

Comments
  • Do you perhaps have that script in all three of the HTML pages?
  • I do... which makes sense as to why it's stuck in a loop. How would it know to load a random file on refresh if the script isn't loaded on each of them though?
  • Do you want to load a single page, and then forward to one of the three random pages, or do you want to forward to a random page whenever you hit one of the three pages?
  • I'm building sort of a StumbleUpon (but with local URLs), so I'm not necessarily looking for any forwarding, rather than just to load any of the html pages randomly every time a user refreshes the page. Does that make sense?
  • That makes sense. You could make an index.html page, load a random file in that using AJAX and inserting its content into DOM. I'm going to write an answer now describing this in more detail.
  • This worked for me! Thanks very much. Just curious, why is this considered bad practice?
  • I don't know… it is just feeling. Maybe it´s fine :)
  • This doesn't seem to work for me. Doesn't load any other html page on reload. I'm also somewhat new to javascript so I literally just copy and pasted.