PDA

View Full Version : .PHP file: Changing an iframe with a URL

seanturner70
03-21-2009, 08:24 PM
Hello, I have a page which I embedded 3 live streams on. Each stream is in its own iFrame, I have named them: streamone - streamtwo - streamthr.
However, sometimes the streams aren't on, so, I am wondering if there is a way to have a url box with 3 buttons allowing you to change the streams using a url.

Picture example:
http://img4.imageshack.us/img4/8461/searchy.png
When someone enters a url (e.g. google.com) into the search box, and presses a button (e.g. 1) then it should change the stream in "streamone" to google.com. If they click button 2 then it changes iframe "streamtwo" to google.com.

If it is possible to get the same sort of look. The "blocky" look, then would be great, but it isn't essential. If the search box could take up the left half of the page then that would also be good, but again is not essential.

Thank you for any help in advance :)
eri
03-21-2009, 10:26 PM
I believe the following will work. Take note that it requires the user to not delete the "http://" in the text box. If you want to make it more robust then you should do some sort of error checking for this. You can make the input types images instead of buttons, if you wish.

--Erika

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<style type="text/css">

body{
background-color: #000000;
}

iframe{
margin: 20px;
width: 250px;
height: 250px;
float: left;
}
</style>
</head>

<body>

<iframe name="first" src="http://google.com"></iframe>
<iframe name="second" src="http://yahoo.com"></iframe>
<iframe name="third" src="http://dogpile.com"></iframe>

<div>
<form name="myform">
<input id="mytarget" type="text" style="width:400px;" value="http://">
<input type="button" onClick="top.frames['first'].location.href=document.getElementById('mytarget').value;" value="1">
<input type="button" onClick="top.frames['second'].location.href=document.getElementById('mytarget').value;" value="2">
<input type="button" onClick="top.frames['third'].location.href=document.getElementById('mytarget').value;" value="3">
</form>

</body>
</html>