Load a page in an external pages iFrame

Hey there,

I create emails for various clients, for them to send out to their customers. I also have a Landing page, in which some links from the email direct to.

The email is not necessarily needed for this, so just think of it as clicking from a page to then be directed to another page, and then in that new page have an iFrame on that page load content specific to the link you clicked on in the e-mail.

The landing page can be found here: http://ve-designs.net/wyse/landingpage/

As you can see, when you rollover the tabs at the top I have a javascript function to change the colour of the border surrounding the iFrame (note that this border is not in the iFrame itself) and then also, another script loads the various content pages into the iFrame depending on which tab you just rolled over.

Now, I know there is such a script (in fact I've even used it before, but can not find it anywhere) that can load a designated page into another page. Something like the following (although i do not know the script required for this):

Code:

---

<a href="theParentPage.html?thePageToLoadInTheParentsIFrame.html" ></a>

---

So if anyone could give me that alone, that would be grand.

ALTHOUGH. There is then the question of - when the user clicks a link on the email that should direct them to tab 2's content, the content may well load - but the colour border around the outside will not be correct.

I have a javascript, that when the tabs are rolled over it switches between three different css stylesheets - one for each tab. This works really well - until i want to direct users to specific tabs from outside the site itself - like I am now.


SO. The real question is, can I have, on the e-mail, and link that would do the following:

User clicks on link > link contains information saying that tab2.html and tab2.css should be loaded when i reach the final landing page > user reaches landing page and tab2.html is successfully loaded in to the content iFrame and the coloured border has changed to represent tab 2.

This would probably require some pretty specifically written Javascript, so if anyone could help me out here i would be eternally grateful.



PLAN OF ACTION NUMBER 2.
If this turns out to be completely impossible (which I hope not, because if i can target pages to be loaded into iframes, why cant i say "when you click this link, run the tab change script").

Could i then direct the user to a blank page, that would contain more javascript appropriate to a website rather than an e-mail than would then forward them onto the tab 2 things.

For instance: User clicks on link that goes to tab2redirect.html > tab2redirect.html the contains something like <meta refresh="gotoThisPage,loadThisContent,changeThisStyleSheet" > (not accurate i know).

This idea seems a little more plausible perhaps.


PLAN OF ACTION NUMBER 3.
This basically entails scraping the whole javascript change css (which I'm reluctant to do, as it took me a day to get that working). Then having the border INSIDE the iFrame so that both corresponding border and content are loaded together at the same time.
This seems simpler, but still requires the "load this content in this pages iframe" script.



Sorry for the long post, it's a tad complicated.

If anyone can help, I'd love you!
Thanks,
-Van Helsing

I'm not sure how this will work with your colored borders, etc, but to load a specific iframe inside a page, put this in the head of the iframe page:

Code:

---

<script type="text/javascript">
function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["number1"].location=url
}
}

onload=loadIframe
</script>

---

Then write the iframe with the name and id matching the script:

Code:

---

<iframe name="number1" id="number1" src="theParentPage.html""></iframe>

---

Then your url's would be written from your external page would work the way you have them written above: <a href="theParentPage.html?thePageToLoadInTheParentsIFrame.html" ></a>

Again, you'll need to work this into your other scripts to get the color and css changes, but this should help you get started.

Thanks for your input!


Unfortunately, it has come to my attention that using Javascript in an email is a HUGE No-No - as it poses a fairly large security risk to the user. (not like I'd exploit that, but i can't be sure if a clients e-mail app will enable the javascript or not).

I've done some reading, and it seems the way i need to go is this:

User clicks on link to go to Tab 2 in e-mail > user goes to tab2redirect.html, in which an onLoad(); function then redirects / or loads 'thePageToLoadInTheParentsIFrame.htm' inside 'theParentPage.html' > user gets to where they want to be.

So, all I need now is the script that i can place in the page tab2redirect.html inside the onLoad(); function (so that it fires the script when the page loads, thus leaving no delay - hopefully).

That script would be the loadThisPage in thisFrame on thisPage -- of which I have used before, but can't find where , but atleast i know it exists.

Thanks again for your help,
-Van