External link to iframe

Techmom · #1 (**permalink**) 08-14-06, 03:28 PM

I've looked everywhere on the web for this and got close to an answer on another post but not quite exactly what i was looking for.

I have a website (let's call it Ryebread) formatted with 1 iframe called 'bob' which I use as the content frame. All links within that website load the content into the iframe bob. What I want to be able to do is have an external text link (outside of Ryebread) that will load the Ryebread index.html file but also target a certain .html file into the iframe.

For example:
http://www.Techmom.com/Ryebread/index.html (this file's default iframe is called cooking.html) But with the link I want the iframe (bob) to load recipes.html.

So the text link will have to link to the Ryebread/index.html and somehow override it and load the recipes.html (internet folder location - if loaded in the parent location would be: http://www.Techmom.com/Ryebread/recipes/recipes.html). I suppose if this can't be done through the external text link - either by simple link and target attributes can a javascript be created to do this that is attached to the link? Or another way I thought might work is to create another page in place of index.html that has a script that doesn't call out specific content for the iframe but allows the link to identify which file to load in iframe 'bob'.

Have I been clear in my description? PLEASE help?!!

techmom

Techmom · #2 (**permalink**) 08-14-06, 06:30 PM

I am proud to say that after all my research and websearching, I found the solution!!! MY HUSBAND! This completely and totally works. (I had no idea I married a genious - LOL)

NOTE: Please bare with me I'm writing this for people who don't necessarilly understand code.

Note: We are using these filenames:
index.html = the file with the iframe
default.html = the file that the index.html file loads in the iframe if nothing else is specified,
finalcontent.html = the file you want to be loaded in the iframe of the index file (not the default file)
textlinkfile = the text link that will link to the index file and the targeted finalcontent.html file for the iframe
bob = the name of the iframe.

STEP ONE:
Put this javascript code in your index.html file:

Code:

<script language=javascript>function loadsource() 
{ 
var defaultPage = "default.html (Enter the filename you want as your default here)";
   var query = window.location.search.substring(1);
   var pos = query.indexOf('=');
   if (pos > 0) 
   {
      var frameSource = query.substring(pos+1);
      window.frames["bob"].location = frameSource;
   }
   else
   {
	  window.frames["bob"].location = defaultPage;
   }
}
</script>

STEP TWO:
Enter this just before the iframe identifier in the index.html file:
<body onLoad="loadsource()">

It should look like this with the iframe attributes:

Code:

<body onLoad="loadsource()"><iframe name="bob" width="621" height="447" horizonalscrolling="yes" frameborder="0" ></iframe>

STEP THREE:
Now on the external textlinkfile add this to the text link:

Code:

<a href="index.html?fs=finalcontent.html">Recipe</a>

Make sure you include the entire path. So if your file is in a folder include that: example - folder/finalcontent.html

Test it. It should work!!!

Let me know if it's helped you!

Techmom

Christian · #3 (**permalink**) 08-16-06, 12:43 PM

Gald you found a solution and thanks for sharing.

nimblefingers · #4 (**permalink**) 08-22-06, 04:10 PM

thank you SOOO much for that. I"ve been searching and searching for how to do that and it seemed like no one else had posted anything about it! i tried what you said and it works PERFECTLY! thank you (and your husband)!

I registered for the site just to thank you!

dupledge · #5 (**permalink**) 08-28-06, 07:28 AM

I think I know what you mean so here is some code

the external website link page can be formatted how they want. Here is some sample code including the link required

Code:

<html>
<head>
<title>External link test page</title>
</head>
<body>
Try this link <a href="Local_Iframe_Page.htm?test.htm">test link</a>
</body>
</html>

Your Iframe Page code sample

Code:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Internal Ifarme Page</title>
<script type="text/javascript">
function LoadIFrame($file)
{
    document.getElementById("frame1").src=$file; //loads file into Iframe
    document.getElementById("frame1").style.width = "95%"; //sets width of Iframe
    document.getElementById("frame1").style.height = "100"; //sets height of Iframe
    document.getElementById("frame1").style.wordWrap = "break-word";		// just word wraps the contents of the Iframe

}

</script>

<script type="text/javascript">
function LoadContent() {
  if (location.search.length > 0){ //check if url has something
    url = unescape(location.search.substring(1)); //strip out the filename to be loaded into Iframe
  	LoadIFrame(url); //call the loadiframe function
  }
}
</script>
</head>

<body onload="LoadContent()"><center><br>
<table class="main" border=1>
	<tr>
		<td align="center" colspan="2">header</td>
  </tr>      		
	<tr>
		<td>sidebar</td>
		<td width="100%" cellpadding="10" colspan="2"><center>&nbsp;<iframe border="1" frameborder="1" src="intro.htm" id="frame1" width="95%" height="100" scrolling="yes" align="center">&nbsp;</iframe></center></td>
	</tr>
</table>
</center>
</body>
</html>

A test page sample to test with.

Code:

<html>
<head>
<title>Loaded test page</title>
</head>
<body>

test text loaded into Iframe
All you need to add to any external link is the following

some other words or content here<br>
some other words or content here<br>
some other words or content here<br>
some other words or content here<br>
some other words or content here<br>
some other words or content here and to prove that it wordwraps here is a long line of words repeated some other words or content here and to prove that it wordwraps here is a long line of words repeated some other words or content here and to prove that it wordwraps here is a long line of words repeated
etc

</body>
</html>

Finally the link that would need to be put into the externally hosted website that was linking to you (this can also be local)

Code:

<a href="Local_Iframe_Page.htm?test.htm">test link</a>

One more thing if you want to load an external website into your Iframe use this

Code:

<a href="Local_Iframe_Page.htm?http://somewebsite.com">test link</a>

cheers

Dupledge

auvi1 · #6 (**permalink**) 06-18-08, 03:50 AM

Finally someone how solved the puzzle, Techmom you better love that man for eternity. And definitely He’s one of the lucky guys to be married to an equally

genius woman.

I only subscribed to this forum to say there are not enough words to describe my tremendous gratitude for your post.
God bless You Techmom

burjzyntski · #7 (**permalink**) 09-28-08, 06:45 PM

Thank you so much, Techmom!
This is exactly what I "searched and searched" for also!

This has really saved me a lot of time and worry.
(I, too, registered just to thank you!)

Dymlos · #8 (**permalink**) 07-23-09, 12:57 PM

Hello!

This might be a year or two late but does someone know how to get that link adress into flash?

The code works fine when I only use a nomal link (html button or whatever) but I want my flash button to do this... I have tried

on(release){
getURL("Page2.html?fs=Produktpage1.html");
}

The page2.html have the script in it...

I just copied the code into my test site to see if it worked and it did but not with flash...

I have even tried this code:

on(release){
getURL("Page2.html?bob=Produktpage1.html");
}

and no progress...

And you might wonder... what happens then?
Well I get linked to Page2.html but the iframe doesnt change like it does in when I use the normal html code:

<a href="page2.html?fs=Produktpage1.html">Recipe</a>

Can someone please help me and fast, onegai? =3

Ps. Gomenazai for my bad english ^^''

Thanks!