iframe access in Javascript

**Cainnech** · Dec 26 '07, 12:48 AM

Hi Kathy,

Let's see if I get it right. You've got a page with an iframe in it.

When clicking a link on the parent window (so the big page where the iframe is put in) you would like to have two pages loaded? One in the parent window and one in the iframe ?

If that's the case then this is the code:

Code:

<html>
<head>
<script type="text/javascript">
<!--
function link(url1,url2) {

window.open(url1,"content");
window.open(url2,"newwindow","width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes")

}
//-->
</script>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" height="100%" align="center" valign="top">
<iframe src="http://www.sevensheaven.nl/images/producten/illustration-illustratie_smiley-emoticon_04.jpg" width="500px" height="500px" name="content" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</td>
</tr>
<tr>
<td width="100%" height="100%" align="center" valign="top">
<br />
<input type="button" onClick="link('http://www.google.com','http://www.yahoo.com')" value="Click Here"></td>
</tr>
</table>
</body>
</html>

Some explanations might be in order if you would like to change the script to your needs.

In the javascript function you'll see two properties in that function (url1 & url2). These are put there to prevent you from having to place a new function for every link you want to place. So if you have 7 different buttons with links, you just have to repeat

Code:

<input type="button" onClick="link('http://www.google.com','http://www.yahoo.com')" value="Click Here">

and change the names of the url's.

In this example the first url loads into the iframe and the second one loads in a popupwindow.

Note that there are a lot of properties in the second window.open
These are not mandatory, but I included them just to let you see what you can do with your popupwindow. Only the first two statements are neccessary (that's the url and the destination window).

Just two more things:

"content" is the name of the iframe. If you change it, you should also change the name in the function above. And you can also use the <a href> tag to call on the javascript in the following way:

Code:

<a href="javascript:link('http://www.google.com','http://www.yahoo.com')">Click here</a>

I hope this helps you.

Greets,

Cainnech

iframe access in Javascript

iframe access in Javascript

Comment