How to load duel iFrames via redirect when pages are accessed from an outside domain?

[Elyse Summers]

I'm working on a site for an artist who didn't want to use flash to display his work (unique, right?), so I am using two iframes to display the work and the description with the navigation on the index page in a div. I know, I know, iFrames, but he wanted to have multiple pictures in a series change while the navigation and description below remained static and have each image on it's own page so it could be linked to individually if needed, so what else was I to do? ;)

Anyways, code and scripts can be seen here --> http://www.bradleyalan hart.com/index2.html - working/live examples with art are under "PAINTING > SELECTED WORKS" or "SCULPTURE"

The problem: What I want is to put a javascript redirect on all the pages that load in the iFrame "art", so that if someone links to a specific piece (ie through the "share on facebook" feature), when the link in the outside domain is clicked and they are brought to the specific piece that was linked (usually contained in an iFrame) the page will direct the browser to open the main page instead so you get the navigation, with the content of the iFrames on reload being the art and description of the piece initially linked.

So, in short, if a page meant to load in iFrame1 (lets call it "painting1.html ") is loaded outside of an iFrame I know I can have the browser recognize that and redirect with if(self.locatio n==top.location )self.location=
but what I don't know how to do is make that self.location= point to: loading the index2.html page with "painting1.html " loaded in iFrame1 (named "art") and a file named "painting1_info .html" loaded in iFrame2 (named "descriptio n").

Javascript isn't my forte, I work mainly in HTML/CSS and learn bits of javascript when I need them, but this one is seriously stumping me - I hope someone can help me out! I'm really stuck and because of the nature of this client's needs I don't have a lot of billable hours to spend testing for a solution. Plus, frankly, I think it's just beyond my depth. Any help would be GREATLY appreciated.

[gits]

if you want to do that only with javascript then you would need to pass the child-urls to the parent-url like:

if (self.location != top.location) {
    var baseUrl = 'index2.html';
    var redirTo = baseUrl + '?painting=self.location';

    self.location = redirTo;

    // now in your index2 page there should be a function that
    // checks for one or more query-string parameters so that 
    // you could use them to set the src of the iframes
}

this is the basic idea to get you started :) it might be that you would need to parse the urls for '_info' or similar to differ between a called info or painting page in some way.

kind regards

[Elyse Summers]

Hey gits, thank for the point in the right direction - I definitely needed some different perspective. I've got the first half working, success! I'm just having trouble getting the second iFrame to load, too - maybe someone could take a peek and see if I'm doing something glaringly obviously wrong? (I most likely am - this was my first stab at writing and implimenting something that doesn't directly deal with changing html/css stylistic variables)

Code for each page I want to reload if accessed outside an iFrame:

<script language="javascript">

if(self.location==top.location)self.location="index2.html?BMO.html?bmo_info.html";
</script>

Code for index2.html page:

<script language="javascript">

window.onload=function(){
var a=window.location.search.substring(1);
var d=window.location.search.substring(a.length+1);
if(a!='')document.getElementById('art').src=a;
if(d!='')document.getElementById('description').src=d;
}
</script>

The live example I'm working with is the BMO Piece - access it directly from here: http://www.bradleyalanhart.com/BMO.html to see how it is (and yet isn't completely!) working.

If anyone can point out where my glaring error is I'd appreciate it :) To be honest, I felt super accomplished writing my own little script just to load the one iFrame, lol!

[Elyse Summers]

I solved this, though not in the way I was initially thinking to, but just in case some one ever has this same problem here is my work around:

Code for index page:

<script language="javascript">

window.onload=function(){
var a=window.location.search.substring(1);
if(a!='')document.getElementById('art').src=a;
}
</script>

Code for the page I want reloaded in the iFrame, which also sets the second iFrame once it's been loaded properly, since the "descriptio n" should always be the file associated with the image:

<script language="javascript">
if(self.location==top.location)self.location="index2.html?BMO.html";
</script>

<script language="javascript">
if(self.location!=top.location)parent.document.getElementById('description').src="bmo_info.html";
</script>

And the final product: http://www.bradleyalanhart.com/BMO.html


The nice thing is that with this work around I can now remove all the javascript in the navigation menu, because theoretically I can just have the one link target iFrame 1 ("art") with the piece, and the proper description will load automatically now. (Or at least I would if the client had the budget for the extra time ;) One of those things for the "REVISIT" list when I come back to this page with hopefully a better budget.)