...

View Full Version : onclick load page in Iframe



ansonb
03-17-2012, 06:48 PM
I am a javascript newbie. I have a radio website that runs a live stream 24/7. The live stream is loaded in to an iframe named "stream". I only ever have 2 files that show in that iframe. 1 for when the user has the stream on and another for when they turn it off. stream_on.php and stream_off.php

I also have podcasts on the site and my goal is when the user clicks the .swf object to play the podcast, the live stream in the iframe changes to stream_off.php so that the 2 audios don't overlap each other.

Here's the code I have so far for the .swf object.



<object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur' onclick=\"window.open('stream_off.php','stream')\">
<param name='movie' value='player_mp3_maxi.swf' />
<param name='bgcolor' value='#666666'>";
if ($row['location'] == "")
{
echo "<param name='FlashVars' value='mp3=". $site ."podcasts/". $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
}
else
{
echo "<param name='FlashVars' value='mp3=http://". $row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
}
</object>


And the code for the iframe. It's default state is stream_on.php since on load I want the stream to start right away. I only need it to change upon clicking of any .swf object on the page.



<iframe src='stream_on.php' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe>


As you can see, I put the onclick in the object tag.

Is this correct ? Is there a piece of javascript code I am missing ?

Please Help.

Old Pedant
03-18-2012, 07:38 AM
I don't know if onclick will work in an <object> tag. If not, we can probably fix it with a dummy <div> around the <object>.

But anyway, the onclick needs to look like this:


onclick="document.getElementById('stream').src='stream_off.php';"

ansonb
03-18-2012, 06:18 PM
Tryed it on a div and doesn't work. I'm not sure what the problem is.

Does it matter that I have already set the src in the iframe tag to stream_on.php ? The javascript won't change it because already set ?



<div onclick="document.getElementById('stream').src='stream_off.php';">
<?php echo "
<object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur'>
<param name='movie' value='player_mp3_maxi.swf' />
<param name='bgcolor' value='#666666'>";
if ($row['location'] == "")
{
echo "<param name='FlashVars' value='mp3=". $site ."podcasts/". $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
}
else
{
echo "<param name='FlashVars' value='mp3=http://". $row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
}
echo " </object>";?>
</div>




<iframe src='stream_on.php' name='stream' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe>


To see the page I am talking about go to www.lifestylewebradio.net (http://www.lifestylewebradio.net)

Iframe I want to change is located at the top right corner. Scroll down the page a little to see podcasts. The play button is the <object> I am trying to use the onclick on.

If this doesn't work, is there another way to accomplish this goal using a different language other than javascript ??

Old Pedant
03-18-2012, 08:58 PM
Okay, look here:

http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object

So I assume you have control of the player_mp3_maxi.swf code? If so, just add the external call as suggested in the top post in that thread.

The only other way I can think to do this is to have an <iframe> WITHOUT the <object> in it. Have an icon or whatever in that <iframe>, only. Then, when the div is clicked on, you replace the <iframe> contents with the <object> (presumably by altering the src of the <iframe> at the same time you change the other <iframe> to "off".

In other words, you set it up so only one <iframe> at a time can have active content. Clicking on *ANY* <iframe> changes all the other ones to an "off" state.

Old Pedant
03-18-2012, 09:54 PM
Here, this indeed works. Only problem is that you click on "Play 1" or "Play 2" and it brings up the appropriate player (turning off the others) but then you have to click on the play button again to start the sound. I'm sure you can fix the SWF player to start up in play mode, instead.

**** demo.html ****


<html>
<body>
<iframe id="play1" src="play_off.html?1" width="100" height="100" frameborder="1" scrolling="no"></iframe>
<br/>
<iframe id="play2" src="play_off.html?2" width="100" height="100" frameborder="1" scrolling="no"></iframe>
<br/>
<iframe src='http://www.lifestylewebradio.net/stream_on.php'
name='stream' id='stream' marginheight='0' width='196' height='110' frameborder='1' scrolling='no'></iframe>
</body>
</html>


**** play_off.html ****


<html>
<body>
<div id="show" style="width: 100px; height: 100px;" onclick="playit()">PLAY</div>
<script type="text/javascript">
var which = parseInt(location.search.substring(1));
document.getElementById("show").innerHTML = "Play " + which;

function playit()
{
parent.document.getElementById("stream").src = "http://www.lifestylewebradio.net/stream_off.php";
for ( var i = 1; i < 999; ++i )
{
var f = parent.document.getElementById("play"+i);
if ( f == null ) break;
if ( i != which )
{
f.src = "play_off.html?" + i;
}
}
location.href = "play_on" + which + ".html";
}
</script>
</body>
</html>


**** play_on2.html ****


<html>
<body>
<object type='application/x-shockwave-flash' data='http://www.lifestylewebradio.net/player_mp3_maxi.swf' width='100' height='100' class='blur'>
<param name='movie' value='http://www.lifestylewebradio.net/player_mp3_maxi.swf' />
<param name='bgcolor' value='#666666' />
<param name='FlashVars' value='mp3=http://www.lifestylewebradio.net/podcasts/IMS031112.mp3&showslider=0&showstop=1&autoload=1&bgcolor1=330066&width=50' />
</object>
</body>
</html>


(play_on1.html is identical except for the actual podcast URL, of course).

You would also need to modify your stream_off.php code to do similar to the play_off.html JavaScript. That is, turn off all the other players.

ansonb
03-18-2012, 10:33 PM
No, I do not have access to .swf code. Someone else created it and I only set parameters in the <object> tag to play my mp3 files.

The object is not in an iframe. The only iframe I have is the one playing the live stream at the top of the page. That iframe is what I need to change on clicking of the <object> Nothing in or around the object will change. Just the iframe at the top of the page playing the live stream.

Old Pedant
03-18-2012, 10:35 PM
Try my demo. You'll catch on. It *does* work, except for the need to click twice.

It does require creating one <iframe> per "play" point, but that's easy enough to do if you are using PHP to build the page(s).

Again, if there is a way to tell the SWF file to "start playing as soon as you are loaded" then even the two-click problem is solved.

ansonb
03-18-2012, 10:37 PM
Oh, nevermind that last post.

I get it now. Thanks for the help.

ansonb
03-18-2012, 11:30 PM
It does work. Thank you. And yes, I am able to turn on autoplay so it only requires 1 click.

I have a few questions though.

Why on demo.html do you have 2 iframes, Play 1 and Play 2 ??

And how do I get it to go the other way. When restarting live stream to stop any podcasts ??

ansonb
03-18-2012, 11:39 PM
Nevermind. I think I got it. A different iframe for each podcast. And use similar code as play_off.html in stream_off.php.

You are a master coder. And very helpful.

Thank You.

Old Pedant
03-19-2012, 12:01 AM
Nevermind. I think I got it. A different iframe for each podcast. And use similar code as play_off.html in stream_off.php.

You got it. I know it's a bit different that what might be ideal, but at least it works. I tried it in Firefox and MSIE, by the by.

ansonb
03-19-2012, 12:24 AM
OK Problem. Tried modifying my stream_off.php but it is not working.

Is not stopping podcast and returning to live stream. Also I'm not sure where my listen live button would go in the code.

Here is the code I have for stream_off.php with modifications I tried to make.




<?php

echo "
<div align='center' class='stream' id='stream' onclick='stream()'>LIVE</div>
<script type='text/javascript'>
var which = parseInt(location.search.substring(1));
document.getElementById(\"stream\").innerHTML = \"<img src='images/listen_live.gif' alt='Listen Live' />\";

function stream()
{
parent.document.getElementById(\"play\").src = \"http://www.lifestylewebradio.net/play_off.php\";
for ( var i = 1; i < 999; ++i )
{
var f = parent.document.getElementById(\"stream\"+i);
if ( f == null ) break;
if ( i != which )
{
f.src = \"stream_off.php?\" + i;
}
}
location.href = \"stream_on\" + which + \".php\";
}
</script>

<link href='stream.css' rel='stylesheet' type='text/css' />

<p><script type='text/javascript' src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'></script>
<br><a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
<br><a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>";

?>

Here is my original stream_off.php




echo "
<link href='stream.css' rel='stylesheet' type='text/css' />
<div align='center' class='stream'>

<p><a href='http://www.lifestylewebradio.net/stream_on.php'><img src='images/listen_live.gif' alt='Listen Live' /></a>

<p><script type='text/javascript' src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'></script>
<br><a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
<br><a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>

</div>";

?>


I'm sure it is right in front of my face. I am just not seeing it.

Old Pedant
03-19-2012, 01:55 AM
WHY would you use PHP echo to output JavaScript code that never changes???

Just move it outside of the <?PHP .... ?> tags and keep the coding simpler.

Oh...and there's no reason to change the contents of the <div id="stream">. After all, you are going to be replacing the entire <iframe> contents!

I'd suggest this code for "stream_off.php". Except that I see no reason at all to make it a PHP file, as you aren't using *ANY* PHP controls or variables here. Why not just make it "stream_off.html"?? Won't hurt to be PHP, but there's certainly no reason to use <?PHP ... ?> tags.

Note that <iframe> contents *ARE* web pages, so they should be built the same way you would build any web page. With <html><head><body> tags and with sub-tags in their proper sections.



<html>
<head>
<script type='text/javascript'>
function stream()
{
// turn off all the "playN" <iframe> streams...even if they are already off
for ( var i = 1; i < 999; ++i )
{
var f = parent.document.getElementById("play"+i);
if ( f == null ) break; // quit when no more
f.src = "play_off.html?" + i;
}
// the *LAST* thing we do is replace this <iframe> with the stream_on code
location.href = "stream_on.php";
}
</script>
<link href='stream.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div align='center' class='stream' id='stream' onclick='stream()'>LIVE</div>
<p>
<script type='text/javascript'
src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'>
</script>
<br>
<a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
<br>
<a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>
</body>
</html>

ansonb
03-19-2012, 02:49 AM
I echo the javascript with php because i need php to pass the variables for pod_id, location, and filename to the other files. In the example you gave me it only showed the link to the one podcast. To avoid making a seperate play1.html, play2.html, play3.html etcetera for all 150 podcasts, with php I can create just 1 and pass the variables with $_GET from the main page which runs the mysql query containing all pod information.

Not sure how to do this ?

I got it working with the html you provided and it works wonderfully.

I said I was a javascript newbie. And now i got myself all confused.

Old Pedant
03-19-2012, 02:58 AM
I echo the javascript with php because i need php to pass the variables for pod_id, location, and filename to the other files. In the example you gave me it only showed the link to the one podcast. To avoid making a seperate play1.html, play2.html, play3.html etcetera for all 150 podcasts, with php I can create just 1 and pass the variables with $_GET from the main page which runs the mysql query containing all pod information.
Makes perfect sense. Okay, so just use <?PHP....?> around *ONLY* that section of the code where you use those PHP variable.

I was only basing my comments on the code you showed, and in that code you don't show the use of any $xxx PHP variables.

Presumably you mean this part:


<?PHP
echo "<p><script type='text/javascript' src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'></script>
<br><a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
<br><a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>";
?>

What changes in there? The value for key= and the value for StationId= and what else?

Anyway, there's clearly no reason to use PHP code in the code from the <html> tag through to the <body> tag.

ansonb
03-19-2012, 03:30 AM
No. I am passing variables from my main page that the iframes are displayed in , index.php.
Here is the podcasts part of that code.



echo "<p>
<table width='100%'>
<tr>
<td colspan='3' class='heading'>
Latest Podcasts
</td>
</tr>";

$query3 = "SELECT * FROM podcasts ORDER BY airdate DESC LIMIT 10";
$result3 = mysql_query($query3) or die(mysql_error());

while($row = mysql_fetch_array($result3))
{
$filename=$row['filename'];
echo "<tr>
<td width='100' class='pod_list'>"
. date("M d, Y", strtotime($row['airdate'])) .
"</td>
<td width='450' class='pod_list'>"
. $row['pod_name'] .
"<div class='pod_info'>";
if ($row['show_id'] == "5")
{
echo $row['description'] ."<br>";
$pod_id=$row['pod_id'];
$query4 = "SELECT artist_id,artist_name,pod_id,track,song FROM ims_artists a INNER JOIN artists b USING (artist_id) WHERE pod_id = $pod_id ORDER BY track";
$result4 = mysql_query($query4) or die(mysql_error());

echo "Featured: ";

while ($row = mysql_fetch_array($result4))
{
if ($row['song'] != "")
{
echo $row['artist_name'] ."- ". $row['song'] .", ";
}
else
{
echo $row['artist_name'] .", ";
}
}
}
else
{
echo $row['description'] ;
}
echo " </div>
</td>
<td class='pod_list'>";
if ($filename != "")
{
echo "<table border='0'>
<tr>
<td>
<iframe id='play1' src='play_off.php?1' marginheight='0' marginwidth='0' width='50' height='20' frameborder='0' scrolling='no'>
</iframe>

</td>
</tr>
<tr>
<td>
<form method='post' action='download.php'>";
if ($row['location'] == "")
{
echo "<input type='hidden' name='read' value='". $site ."podcasts/". $filename ."'>";
}
else
{
echo "<input type='hidden' name='read' value='http://". $row['location'] . $filename ."'>";
}
echo " <input type='hidden' name='filename' value='". $filename ."'>
<input type='image' src='images/download.gif' alt='Download' class='blur'>
</form>
</td>
</tr>
</table>";
}
else
{
echo "";
}
echo " </td>
</tr>";
}



The query displays the 10 latest podcasts with a link to see all of them. As you can guess. This page would change everytime a new podcast is uploaded.

Here is the piece of your code that I inserted where each podcast play button goes.



<td class='pod_list'>";
if ($filename != "")
{
echo "<table border='0'>
<tr>
<td>
<iframe id='play1' src='play_off.php?1' marginheight='0' marginwidth='0' width='50' height='20' frameborder='0' scrolling='no'>
</iframe>

</td>
</tr>
<tr>
<td>
<form method='post' action='download.php'>";
if ($row['location'] == "")
{
echo "<input type='hidden' name='read' value='". $site ."podcasts/". $filename ."'>";
}
else
{
echo "<input type='hidden' name='read' value='http://". $row['location'] . $filename ."'>";
}
echo " <input type='hidden' name='filename' value='". $filename ."'>
<input type='image' src='images/download.gif' alt='Download' class='blur'>
</form>
</td>
</tr>
</table>";
}
else
{
echo "";
}
echo " </td>
</tr>";



This is part of a "while" loop. With places for variables for pod_id, location and filename.

Here is what used to be there before I added your code.



echo "<table border='0'>
<tr>
<td>
<object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur'>
<param name='movie' value='player_mp3_maxi.swf' />
<param name='bgcolor' value='#666666'>";
if ($location == "")
{
echo "<param name='FlashVars' value='mp3=". $site ."podcasts/". $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
}
else
{
echo "<param name='FlashVars' value='mp3=http://". $location . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
}
echo " </object>
</td>
</tr>
<tr>
<td>
<form method='post' action='download.php'>";
if ($row['location'] == "")
{
echo "<input type='hidden' name='read' value='". $site ."podcasts/". $filename ."'>";
}
else
{
echo "<input type='hidden' name='read' value='http://". $row['location'] . $filename ."'>";
}
echo " <input type='hidden' name='filename' value='". $filename ."'>
<input type='image' src='images/download.gif' alt='Download' class='blur'>
</form>
</td>
</tr>
</table>";
}
else
{
echo "";
}
echo " </td>
</tr>";



I have now moved that to play1.html and play2.html as your code suggested.

How do I pass those variables from index.php where the query is run all the way to play1.html inside the iframe without having to manually type 10 different play.html files ?

Sorry if I'm stupid. I am probably annoying you at this point.

But thanks for all your help.

Old Pedant
03-19-2012, 05:20 AM
My head hurts. The code I gave you in my post #13 was the code to use for stream_off.php page.

It had nothing to do with your play_off.php or play_onN.php pages.

Sorry if I confused you.

Maybe if you'd just put the code up live somewhere (can be a page most people won't see, if you prefer) that would be easiest way for me to see how you have integrated my code and what, if anything, is wrong.

ansonb
03-19-2012, 05:22 AM
Here is the page I am working on.

http://www.lifestylewebradio.net/index2.php

Old Pedant
03-19-2012, 06:49 AM
Okay, one reason it's not working is that your code looks like this:


<iframe id='play1' src='play_off.php?1&pod_id=' ... >


So when my code does this:


var which = parseInt(location.search.substring(1));

it gets an error trying to convert 1&pod_id=147 to an integer! The variable which becomes undefined and so the code that depends on it is toast.

You didn't tell me you needed to pass a pod_id to the play_off.php page.

So we need to fix the code.

Change to code so it generates

<iframe id='play1' src='play_off.php?div=1&pod_id=xxx' ... >

And then use PHP code to get that div number instead of JavaScript.

e.g.,


<?PHP
which = $_GET["div"];
?>
<script type="text/javascript">
var which = parseInt(<?PHP echo which; ?>);
document.getElementById("show").innerHTML = "<img src='http://www.lifestylewebradio.net/images/play.gif' />" + which;

function playit()
{
... rest same ...

AND GET RID OF THE CODE IN RED THERE!

You do *NOT* need or want it!

The line at the end of the JS does this

location.href = "play_on" + which + ".php?pod_id=";

which COMPLETELY REPLACES all the contents of the entire HTML page that is contained in that <iframe>.

Old Pedant
03-19-2012, 06:55 AM
*MORE PROBLEMS*

Look:


<iframe id='play1' src='play_off.php?1&pod_id=' ...
<iframe id='play1' src='play_off.php?1&pod_id=145'
<iframe id='play1' src='play_off.php?1&pod_id=143'
...


First of all, notice the missing pod_id in the first <iframe>. Is that an error??

You CAN NOT use the same ID more than ONCE on a given HTML page!

You need to *NUMBER* your <iframe> id's. AND you need to pass that *SAME NUMBER* to the play_off.php code.

So that your final HTML comes out looking like this:


[code]
<iframe id='play1' src='play_off.php?div=1&pod_id=' ...
<iframe id='play2' src='play_off.php?div=2&pod_id=145'
<iframe id='play3' src='play_off.php?div=3&pod_id=143'
...

Note that I have added in the div= as recommended in my just prior post.

Numbering the divs should be easy: Just use a counter in the loop where you create them in PHP.

ALSO... They *MUST* be numbered starting at 1 and be consecutive. The JavaScript code in play_off.php depends on that.

ansonb
03-19-2012, 09:30 AM
Thank You so much. It is working.

Only getting every other pod_id, but when it loads play_on.php it says it is an error in my mysql syntax.

Have to figure that out but that shouldn't be too difficult.

Thank you for all your help.

ansonb
03-21-2012, 11:47 PM
OK. one more small problem.

It is working great however it will only play the first podcast you click on. Then when you click another, it loads the player but sits there and doesn't play the file. When I view source, all the proper links are there and I can not figure out why it will only play the first one clicked.

Here is the web address again.

http://www.lifestylewebradio.net/index2.php

Please help.

Thank You.

Old Pedant
03-22-2012, 01:32 AM
Welll sure!

LOOK at the code:



function playit()
{
parent.document.getElementById("stream").src = "http://www.lifestylewebradio.net/stream_off.php";
for ( var i = 1; i < 999; ++i )
{
var f = parent.document.getElementById("play"+i);
if ( f == null ) break;
if ( i != which )
{
f.src = "play_off.php?" + i;
}
}
location.href = "play_on.php?div=1&pod=http://www.lifestylewebradio.net/podcasts/SundayNightTalkRadio031812.mp3";
}


Once you click to play one of the feeds, it turns all the others off by changing the .src of their <iframe>. But you are sill using my original code that (a) didn't put in the div= part and (b) you added in that "pod=" with the URL!!!

But fear not! There's an easy fix.

Let's look at an example of a *PAIR* of the url's you are using:



src='play_off.php?div=1&pod=http://www.lifestylewebradio.net/podcasts/SundayNightTalkRadio031812.mp3'

src='play_on.php?div=1&pod=http://www.lifestylewebradio.net/podcasts/SundayNightTalkRadio031812.mp3'


What is the difference between those?

*ONLY* the difference between "off" and "on"!!!

So the fix is easy:


for ( var i = 1; i < 999; ++i )
{
var f = parent.document.getElementById("play"+i);
if ( f == null ) break;
if ( i != which )
{
f.src = f.src.replace("play_on","play_off");
}
}

You see it? ANY of the 10 that are playing, you simply change then from "play_on" to "play_off".

The ones that are *NOT* playing--the ones that are already "play_off" are UNAFFECTED!

TRY IT! I'll bet it works.

ansonb
03-22-2012, 03:37 AM
Thanks dude. It does. You are awesome.

Old Pedant
03-22-2012, 03:47 AM
By the by, another thing this means...

You could replace the line that does this:


location.href = "play_on.php?div=1&pod=http://www.lifestylewebradio.net/podcasts/SundayNightTalkRadio031812.mp3";

with simply:


location.href = location.href.replace("play_off","play_on");


Probably doesn't matter, as you are doing that code in PHP, but...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum