Join 3,572 readers in helping fund MetaFilter (Hide)


Random webpage loaded from a list every 10 mins?
May 8, 2014 7:32 AM   Subscribe

Clever web coding ninjas: I require an html webpage to be loaded from a list / directory at random every ten minutes. This cycle repeats indefinitely, with the next random page being pulled up automatically for as long as the browser is open.

I am guessing a list and/or directory of html files and a PHP script would do it, but I am sure there are other ninja skills that could be implemented. Google searching has lead me into the stackoverflow black hole.

Every html page will have the same layout as this, but with different images, sound and text. (There will be about 45 html pages). The script will reload every ten minutes and a different page will pop up in the browser.
posted by 0bvious to Computers & Internet (21 answers total) 5 users marked this as a favorite
 
It kind of depends whether you own (and can modify) all of the pages. A simple Javascript include in the header of each page can redirect to a random page after an interval. You could either use PHP to randomise this, or you could have the entire list of 45 pages coded into the Javascript, and decide on the client side.

To use PHP, either the pages themselves, or the Javascript file, would need to be a PHP script. You probably need to set out what restrictions apply in terms of whether things can be .php files as opposed to .html files.

If you don't own the pages you want to load, you might need to resort to modifying the loaded page with cURL or another method.
posted by pipeski at 7:43 AM on May 8


I do own all the pages, and can access the code.

I am guessing then that the javascript array would look something like this stackoverflow example.

Then I'd need a "page refresh every ten minutes" call? How would I implement that?

Sorry. I am a copy-paste coder at best
posted by 0bvious at 7:48 AM on May 8


I'd use an iframe on the parent page, use a js array and then update the source of the iframe.

http://stackoverflow.com/questions/86428/whats-the-best-way-to-reload-an-iframe-using-javascript
posted by isauteikisa at 8:18 AM on May 8 [2 favorites]


This also has the side benefit of modifying one file, as opposed to 45.
posted by isauteikisa at 8:21 AM on May 8


Yes, iframes would cut down your workload a lot. The next best thing would be to use the code from your stackoverflow example (plus a setTimeout for your 10 minute interval) in an external Javascript, and load that in the <head> section of each of your pages.

I'd type out some code to cut-and-paste if I had time. Hopefully someone else will.
posted by pipeski at 8:35 AM on May 8


Thanks so far.

I have got it to work with the javascript list version: this code refreshes every 5 mins.

How would I implement the iframe method into this?
posted by 0bvious at 8:37 AM on May 8


One option is to write a new php file that appends a to the contents of a random html file. The head section can then contain a meta-refresh directive.

My php is super rusty but some pseudo-ish code might look like:

<>
$array-of-links = ['somepage.html','someotherpage.html'];
$content = random($array-of-links);
echo ""
echo open($content).read()
?>

The browser then reload the page every 10min and the content changes randomly. I do recognize that this is more than a little ugly esp if the content pages are well formed html (you shouldn't have more than one HEAD). Not to mention that the stdlib random and file reading functions aren't likely to look quite like this.

Edit/preview: the ifram will be a child of window and has a src attribute that you can set to a url https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe
posted by mce at 8:48 AM on May 8


http://pastebin.com/ZezkJQDF

Banged this out in a couple of minutes. You'll need to change the randomization (and the iframe size, obv), but this should show you a technique to do it.

Requires jQuery, because jQuery.

600000 = 10min in milliseconds, feel free to reduce to something like 30000 for testing.

(If your page jumps to fullscreen, it's b/c one of the sites used for testing uses a framebuster. Sorry about that :( )
posted by isauteikisa at 9:23 AM on May 8


Note: check the MDN PAGE for Math.random. It has a good snippet for getting a random int between a min and max (in your case, 0, and array length -1) that you can use to call the url you want from your array.

// Returns a random integer between min and max
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

posted by czytm at 11:04 AM on May 8 [1 favorite]


simple page w/o jquery or frames
posted by j_curiouser at 11:12 AM on May 8


Thanks for the randint snippet czytm - looks to be a good one to integrate.
posted by isauteikisa at 11:17 AM on May 8


Hmmm @isauteikisa I can't get your version to work. Yes iframe loads, but there's nothing in it. Am I missing a vital ingredient?
posted by 0bvious at 11:42 AM on May 8


Notice the script reference to jquery at the top? For testing, change that line to what is contained at this link: http://pastebin.com/5WZgXHdZ . This will keep you from needing to grab the correct version of jquery // put it in correct relation to the html file // etc.

Barring that, open console in your browser and see if anything is throwing an error when the page loads. It was working for me in Chrome when I tested it.

At 600000 as the value, it will take the full 10 min to change, so drop it to something like 10000 for testing.

Let me know if the above helps.
posted by isauteikisa at 11:55 AM on May 8


I made a little tiny webpage that does this. Here it is.

This page will open a new window (make an exception to your popup blocker for it), and then every 10 minutes, randomly select a new page to load in that window from a list (look at the code in the link above to see the list, you can add anything you want).

You don't have to modify any of your existing pages for this, and you can use webpages you don't control. Just leave both windows open (you can minimize the background one or something if you like) and you'll see a new page every 10 minutes indefinitely.
posted by tylerkaraszewski at 12:21 PM on May 8


Thanks again @isauteikisa. That solved it. Now functioning. I added some bits to remove iframe visibility. For anyone interested, see the 20 second version here.
posted by 0bvious at 3:23 PM on May 8


Having the same problem with yours @tylerkaraszewski. The page loads a popup, but there is nothing displayed in it.
posted by 0bvious at 3:38 PM on May 8


As a note, 0bvious, you'll never hit the 3rd site in that array the way the code is structured currently.

Look at czytm's response and link above, and use that to get the number you pass into your sites array.

Other than that, looking good!
posted by isauteikisa at 4:03 PM on May 8


I tried to integrate that, but now just getting the same page reload forever. What have I messed up here?
posted by 0bvious at 5:09 AM on May 9


Also, my array will end up having 40+ items in it. Does this change how to run it successfully?
posted by 0bvious at 5:15 AM on May 9


So, an explanation about what's different between my code, and how it should look with the new randomness integrated, is in order.

In my original code (essentially a coinflip between two sites), the line that provides the randomness was
var num = Math.random();

Math.random(); generates a decimal between 0 and 1. My next lines of code (checking if below or above 0.5) is what determines which of two sites to display. Those sites are at index 0 and 1 in our sites array, hence sites[0] and sites[1].

There are three issues that need to be resolved in order to get your code working for the 45 sites in it. First, the new random you added was not added correctly, so let's fix that. The relevant line here is
var num = Math.floor(Math.random() * (max - min + 1)) + min;

max and min are variables for the range of random numbers you want to generate. So say you have 45 sites: you'd want to generate a number between 1 and 45, EXCEPT that our arrays are 0-indexed (which means that in order to get the first element of the array, you'd pass in a 0 instead of a 1), so your min is 0 and your max is 44.

So first, add two more lines above var num (assuming 45 sites):
var min = 0;
var max = 44;

Now the var num line will generate a whole number between 0 and 44 inclusive, which is what you will need to pick your random site. The next step is to load the site, which means getting the site that corresponds with the number we picked out of the array.

Change the following lines:
if (num < 0.5)
{
$('#target').attr('src',sites[0]);
}
else
{
$('#target').attr('src',sites[1]);
}

To the following:
$('#target').attr('src',sites[num]);

This will pass the random number into our sites array and correctly set the new site.

Finally, change
function newPage(min, max)

back to
function newPage()

This should solve the remainder of your problems. Let me know if you have any further questions.
posted by isauteikisa at 8:19 AM on May 9


That's the ticket!

Thanks everyone. Really helpful
posted by 0bvious at 10:42 AM on May 9


« Older I've been having problems usin...   |  My feisty darling Banana had t... Newer »

You are not logged in, either login or create an account to post comments