load specific iframe using link/address?

[JohnP]

I have my site set up where my index page opens all other 'content pages' into a main 'content' iframe. (the address always reads www.mysite.com/index.html)

My question is, how can I give these 'content pages' their own address should I want to direct someone to the index page with a specific 'content page' already loaded into the main iframe?

What is the easiest way to do this by keeping the index page modular (and avoiding putting the index page code on each content page)?

Thanks

[jscheuer1]

Javascript (unreliable - users could have it turned off), or preferably server side code like PHP or asp none of which rely upon the browser, but might (probably will) require you changing the extension (the .html part) of your index.html page's filename.

Do you have server side code available to you on your host?

[JohnP]

Yes I have PHP etc on my server.

PHP or Javascript options would be great... (I have JS code on the pages anyway, so that might be easiest?)

Thanks

[jscheuer1]

• How many other pages on the site specifically link to index.html? How easy would it be to change all those links to point to index.php or (preferred) to the root folder?
  
  
• How many iframes are we talking about?
  
  
• How essential is the other javascript you are talking about to the accessibility of the site? (Ideally a site should be accessible without javascript.)

You should answer these questions as it will help us to focus in what we will do next. But I will also need a link to the live page so I can have a look at it. I wouldn't want to recommend anything that can't work with your current setup. Shortcuts may present themselves, etc.

Any information that you don't want public you may send me via PM.

[JohnP]

I can change them to .php, there's only about ten pages. I'm interested particularly for future sites I create also.

There's just 1 big 'content' iframe in the middle of the page

I have a lot of video (it's my graphics reel) and I'm using a player which requires JS, so my pages won't load properly without it anyway.

I'll wend you the link via PM

Thanks

[JohnP]

Still looking for a solution or reference to somewhere I can find the info... Thanks

[jscheuer1]

It depends upon how much work you want to do now vs how much work you want to do later. It also depends upon whether or not you anticipate having PHP available for the other sites you are contemplating doing a similar sort of thing on. Other factors may or may not be involved.

The easiest "just slap it on" solution would be to use javascript. Even that would be a bit involved and might need tweaking once it's in place to tailor it to your needs.

I should mention that your video need not depend upon javascript. The swfobject.js script you are using already has a non-javascript fall back, for example (on Animations/ES_Gears.html) it's:

<div id='mediaspace'>
<br>
Sorry but the video content was unable to load.<p>
This is typically due to one of 2 things:<p>

:: You didn't allow 'ActiveX' controls. This is needed for the Javascript to run.<br>

:: You don't have flash installed. You can download it <a href="http://get.adobe.com/flashplayer/" target="blank">Here</a> </div>

I know that's primarily for if the browser can't do Flash, but it's what non-javascript users see as well. It could be modified so as to still show the Flash if possible, even when javascript is unavailable. Or it could at least include some language about requiring javascript enabled. It's also (though not entirely incorrect) a little accusatory and a bit misleading.

Whatever you decide to do about that, the entire page and the many like it could all be generated by a single PHP page to which could be fed a few key parameters, probably in the form of a get. Or one parameter as get that would instruct it to get others from a text file or database. Even without that, one parameter might be all that is required. That depends upon how much the various videos share in common as far as layout, etc.

Getting back to your question, I see that on EffinScience.html there already is:

  <SCRIPT LANGUAGE="JavaScript">
  <!--
  if (parent.location.href.indexOf("index.html") == -1)
  top.location.href = "index.html"
  // -->
  </SCRIPT>

to load index.html if this page is navigated to by itself. That's probably not the best way to do that, I'd go for:

<script type="text/javascript">
(function(){
	var lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/';
	}
})();
</script>

Now if you want to add a query string to get the iframe on index.html to load this page, do it like (this script without modification can go on any page on the same domain that you want to have receive this treatment, it may be an external script):

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Notice the red 0, that's the iframe we are targeting on the index page. Iframes on a page are numbered from 0 to however many that there are. In this case you have only one I think, so 0 should be fine.

Then on index.html put this script just before the closing </body> tag (it may be external, but still must go right before the closing </body> tag):

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Notes:

• This will probably not work in local testing in some browsers.
  
  
• This last script can go on any page that you want to have load an iframe from a frame and src parameter in the query string. The frame parameter (0 in this case) indicates the first iframe on the page. Only pages from the same domain allowed.
  
  
• Of course, this is a javascript only solution and may need tweaking.

[JohnP]

Thanks for all that John.

I managed to get that working, but only had it uploaded for a moment to test it out. I noticed the content page will only send you to index.html, even if you change it to a different page like index2.html for example:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index2.html)|(/index2.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

I was testing it with index2.html and test.html (they are still on the root of the site if you want to check them out)

It worked great when I changed index2.html to index.html.

Before I implement it throughout the site, I had another question: As it doesn't display correctly offline, what would you suggest would be the best/easiest way to work without uploading it live every time I want to test it?

Would it be better to add some sort of 'if' statement to the js, or do you suggest I install a local machine server for testing? (I think I remember an easy to set up php one)

Thanks

[jscheuer1]

LOL, I was so worried about making it compatible with index.html or index.php that I didn't even think about other pages!

One thing that I haven't emphasized in all this though is that it's preferable to always refer to your main index page as the root of the domain. Like instead of:

<a href="index.html">Home</a>

or any of the many possible variations due to a different extension (other than .html, like index.php) or due to its being referenced from a different folder (../index.html for example), or due to it having a different filename (in the absence of index.whatever, many systems will load home.whatever or main.whatever if present), so just use:

<a href="/">Home</a>

That way no matter what it's called, and no matter from which folder on your site it's called, it will load. What this does is load the default page in the root of the domain.

This is also one of the reasons it will not work locally - unless the root of the local site is also the root of the hard drive. There are other reasons though - like in some browsers cross folder local scripting is seen as cross domain scripting, and is blocked.

That's what my code from my previous post does. It allows index.html or index.php to display the external page in its iframe. But if the external page is displayed on its own, it loads / (which as I say doesn't care what the page is called or where it's called from as long as it's the default page in the root of the domain), with the external page in its iframe.

We can modify the function:

(function(c){
	var pg = c && c.page? c.page.replace(/\./g, '\\.') : '', f = c && c.frame? c.frame : 0,
	qstr = '?frame=' + f + '&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '/' + pg + '(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + (c && c.page? c.page : '') + qstr;
	}
})({page: 'index.html', frame: 0});

Notice the highlighted configuration object. If present it will set the page and/or the frame number. You could use it just for the page or just for the frame.

{page: 'index.html'}

or:

{frame: 2}

The defaults are '' for the page (works out to be /) and 0 for the frame. But now, if you allow the default, you can no longer load the external page into any but /. No big deal, it will just reload it into /. Likewise, when you set the page name, it can only load into that page by name. Again, no big deal, it will just reload into that page. A path relative to the root may also be specified. But I won't go into that in detail at the moment.

To answer your other question, well I think I already did. Yes, you need some kind of local server to test this out. If you're going to be testing out PHP, you would want one that supports that as well. I use WAMP. There are others, at least one other for Windows, and others for other OS's.

One extra bit of info on that requirement for a server - why I chose to set things up that way is that it makes it possible to make sure what page gets loaded into the iframe without having to know its name or path in such a way that also makes it possible to deny pages from other domains from getting loaded into your iframe from a link on another site.

[jscheuer1]

It occurred to me that I'm probably over thinking this. I assumed from the example of the code on the page that you wanted it to load in index.html and only in index.html. Would it be OK if we were to make it so that it cannot be loaded on its own, and that if it is, it has to be loaded into a page from your site? We can do that fairly easily using the existing code on index.html and this code on the external page:

<script type="text/javascript">
if(top.location.href === location.href || location.hostname !== top.location.hostname){
	top.location.href = '/?frame=0&src=' + encodeURIComponent(location.href);
}
</script>

This will still require it to go to the index page, but we could edit to:

<script type="text/javascript">
if(top.location.href === location.href || location.hostname !== top.location.hostname){
	top.location.href = '/index2.html?frame=0&src=' + encodeURIComponent(location.href);
}
</script>

etc.

Note: Remove the / from:

	top.location.href = '/index2.html?frame=0&src=' + encodeURIComponent(location.href);

and you may even be able to run it locally.