[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

HTML <iframe> - how to change URL based on link clicked from the same page

I want to achieve somewhat of a old style of frames, but using <iframe>

how to make an <a href> link tag to control the source of an <iframe> on the same page?

<a href="DisplayPortal1" onClick="myIframe.iframe.src='DisplayPortal1.php';"> Display 1 </a>
<a href="DisplayPortal2" onClick="myIframe.iframe.src='DisplayPortal2.php';"> Display 2 </a>

<iframe src="" ID="myIframe" >  </iframe>
0
willsherwood
Asked:
willsherwood
3 Solutions
 
leakim971PluritechnicianCommented:
Hello willsherwood,

You may use :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <a href="javascript:void();" onClick="document.getElementById('myIframe').src='http://www.google.com';return false;"> Display 1 </a>
    <a href="javascript:void();" onClick="document.getElementById('myIframe').src='http://www.yahoo.com';return false;"> Display 2 </a>
    <iframe id="myIframe" width="640" height="400" ></iframe>
</body>
</html>

Open in new window

0
 
Hans LangerCommented:
try
<HTML>
 <BODY>
	<a href="javascript:void(document.getElementById('myIframe').src='http://www.google.com');"> GOOGLE</a>
	<hr/>
	<a href="javascript:void(document.getElementById('myIframe').src='http://www.yahoo.com');"> YAHOO </a>
	<hr/>
	<iframe src="http://www.google.com" id="myIframe"  width="100%">  </iframe>
 </BODY>
</HTML>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
it is very simple, no need for javascript, use target
try this
<a href="http://www.google.ca" target="myFrame"> gooooogle </a>
|
<a href="http://www.yahoo.ca" target="myFrame"> yahooooo </a><br>

<iframe name=myFrame>no frame</iframe>

Open in new window

0
 
willsherwoodAuthor Commented:
thanks for the great input, really appreciated!
0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now