Diary of an ASP.NET bodger

Sneaky trick with the Javascript back button

On one of our new sites (Still in development) I needed a javascript slideshow of the hotel images. Problem was, the back button held onto each flip through, so to return to the previous page involved a number of hits on the back button.

I looked into the history object, replacing it and generally mucking about with it but after much messing about I discovered a hack which works nicely for me.

I used an IFrame to display the slideshow page, and used an alternate domain name for that page - eg, we have www.travelcounsellors.com and www.travelcounsellors.co.uk.  Because the IFrame referenced www.travelcounsellors.com, it didn't hold the history of co.uk so happy days :). I then thought, hey, what if its not an ASP.NET page, but just an asp page in the same domain? Then it would be part of a different application? That works too...

Here's what I mean

Posted: Jun 19 2003, 11:49 AM by Mr Pike | with 11 comment(s)
Filed under:

Comments

Darren Neimke said:

Nice one, I like it! :-)
# June 19, 2003 2:59 AM

cathal said:

did you try the location.replace javascript syntax (instead of location.href)? This overwrites the current page with the new page destination.
We often use if for 'ghost' pages, where in a commerce pipeline, we want to check something, but don't want the customer to be able to return to the page, as checking the resource is slow/costs money.

# June 19, 2003 3:56 AM

Damian Barrow said:

Yup - tried the replace but I kept getting the page has expired message. I asked on quite a few newsgroups as to what was up and why, but got no real satisfaction (including one from ScottGu).

Hence my hackaround :)
# June 19, 2003 5:53 AM

Daniel Nolan said:

You could just use javascript to preload the image and then swap it in the document directly. This would have no effect on the history either and would integrate more seamlessly into the page.

All you need to do is output all the image locations into an array clientside and then step through them with a preload function.
# June 19, 2003 2:05 PM

Damian Barrow said:

This is true, but our problem was that we had no control over the images and there might be in excess of 30 at a time. So if some doombrain in the traveldept decided to upload a huge image, I needed to be able to run a size check on it first before deciding to display it (I'm looking now at getting it and then shrinking it with asp.net as per Scott Mitchells tutorial.)

Users eh, life would be soo much easier without them.
# June 19, 2003 11:08 PM

James Conner said:

I start my slides shows from a JavaScript link that opens a new browser window. Once that window, which displays the first image, is open, it and all other windows in the slide show offer three JavaScript links below the image: Previous, Close Window, Next. The Previous and Next links trigger a script that (a) closes the currrent window and (b) opens the previous or next window.

Here's the code for the Next link:

This goes in the HEAD:

<script language="JavaScript" type="text/JavaScript">
<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>

How the link is handled.

<a href="javascript:window.close();" style="font-family: arial; font-weight: bold; color:#ffff66; text-decoration: none;" onClick="MM_openBrWindow('23_july_1833.html','','scrollbars=yes,resizable=yes,width=680,height=440')">Next Image</a>

Each image is contained in an HTML page, usually with a dark gray background. Obviously, a template for the page is handy. The advantage of this scheme is that is does not depend on the history state; a viewer can open any page containing a slide and from that point go forward or backward through the entire show.

I usually provide a page with a list of links to each slide page unless there is a valid reason for coercing viewers into following the sequence.
# January 25, 2004 11:21 PM

R. A. said:

This URL shows how I did it. Within any number of iframes, documents use location.replace to replace themselves. They know when to do it, and where to go, by reading (at intervals) variables set in the parent page. For this to work, the pages within the iframes must have appropriate coding.
# February 16, 2004 8:38 PM

R.A. said:

If you downloaded my example (just above) prior to just now, go back and re-download it. There was a typo in one of the support files.

Where is it? The URL is
http://www.icogitate.com/~ra849/misctopics/scriptdemos/changeiframesrc.htm
# February 17, 2004 7:15 AM

a said:

a
# April 12, 2004 2:43 PM

R.A. said:

My above link is now obsolete.
# August 9, 2004 3:52 PM

km websol said:

we replaced that but we keep getting the page expired message

# November 26, 2007 1:07 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)