JavaScript & iframe ... Messed Up?

[howa]

Conside a simple html, has the information...
....
<script type="text/javascript" src="iframe-test.php"></script>
....

and iframe-test.php is as the following....


<?php

if ( rand() % 2 == 0 ) {

?>


var ifb1 = "Yahoo: <iframe id='ifb-yahoo' src='http://www.yahoo.com'></
iframe>";
document.write( ifb1 );

<?php

} else {

?>


var ifb2 = "Google: <iframe id='ifb-google' src='http://
www.google.com'></iframe>";
document.write( ifb2 );


<?php

}

?>


I found that when reload (F5), the iframe content get messed up, e.g.
Yahoo is displaying Google as iframe content and sometimes vice versa.


I have tested on both IE7 and FF3, both has this strange
error....Seems iframe contents are cached?


Any idea?

 

[SAM]

Le 11/26/08 6:41 AM, howa a écrit :

Conside a simple html, has the information...
...
<script type="text/javascript" src="iframe-test.php"></script>
...

and iframe-test.php is as the following....


<?php

if ( rand() % 2 == 0 ) {

?>


var ifb1 = "Yahoo: <iframe id='ifb-yahoo' src='http://www.yahoo.com'></
iframe>";
document.write( ifb1 );

I really do not understand the interest to write html with JS when PHP
could do it !

<?php

} else {

?>


var ifb2 = "Google: <iframe id='ifb-google' src='http://
www.google.com'></iframe>";
document.write( ifb2 );

Why a new variable ?

<?php

$ifb1 = ( rand() % 2 == 0 )?
"Yahoo: <iframe id='ifb-yahoo' src='http://www.yahoo.com'><\/iframe>" :
"Google: <iframe id='ifb-google' src='http://www.google.com'></iframe>";

echo "var ifb = '".$ifb1."';";
?>
document.write(ifb);
// or :

I found that when reload (F5), the iframe content get messed up, e.g.
Yahoo is displaying Google as iframe content and sometimes vice versa.


I have tested on both IE7 and FF3, both has this strange
error....Seems iframe contents are cached?

certainly all opened files are in the cache, and then ?

What FireBug tells about that (in FF)

Probably something wrong in your PHP (or php server's cache) ?
(whhat do you send as headers about 'iframe-test.php' ?)

How are you sure that 'iframe-test.php' is downloaded from server at
each reload ? (I think it isn't : always same file and same date)

 

[howa]

I really do not understand the interest to write html with JS when PHP
could do it !

This is an example to demostrate why reload will messed up the iframe
when using JavaScript.

certainly all opened files are in the cache, and then ?

What FireBug tells about that (in FF)

I have traced using Ethereal, I found the problem is iframe is setting
a wrong target.

Probably something wrong in your PHP (or php server's cache) ?

If you see in my example, I placed a word "Google" and "Yahoo" before
the iframe code. So no matter the page is cached or not, they should
consistent with the iframe.

 

[howa]

If you see in my example, I placed a word "Google" and "Yahoo" before
the iframe code. So no matter the page is cached or not, they should
consistent with the iframe.

online example: http://howachen.googlepages.com/a.html


I am using Firefox3 to test it.

Try to refresh and you will see in some cases, the "word" is
inconsistent with the iframe body.


Thanks for any comments.

 

[SAM]

Le 11/26/08 2:46 PM, howa a écrit :

Please don't post in Japan charset
(changed here in utf-8)

This is an example to demostrate why reload will messed up the iframe
when using JavaScript.




I have traced using Ethereal, I found the problem is iframe is setting
a wrong target.

what the matter with ?
(I saw no "target" in ypur code)

If you see in my example, I placed a word "Google" and "Yahoo" before
the iframe code. So no matter the page is cached or not, they should
consistent with the iframe.

As you mis-employ the association php/js, that demonstrates nothing for me.

<script type="text/javascript">
var ifb1 = "Yahoo: " +
"<iframe id='ifb-yahoo' src='http://www.yahoo.com'>" +
"<\/iframe>";
var ifb2 = "Google: " +
"<iframe id='ifb-google' src='http://www.google.com'>" +
"<\/iframe>";
<?php
$ifb1 = ( rand() % 2;
echo '<h2>$ifb1 modulo 2 = '.$ifb1.'</h2>';
$ifb1 = ( $ifb1 == 0 )? 'ifb1' : 'ifb2';
echo "var ifb = ".$ifb1.";";
?>
alert(ifb);
document.write(ifb);
// or :
document.write(<?php echo $ifb1 ?>);
// or :
ifb = (Math.randon() %2 == 0)? ifb1 : ifb2;
alert(ifb);
document.write(ifb);

</script>


That below (all in JS) works fine for me ;

<html>
<script type="text/javascript">
var ifb1 = "Yahoo: " +
"<iframe id='ifb-yahoo' src='http://www.yahoo.com'>" +
"<\/iframe>";
var ifb2 = "Google: " +
"<iframe id='ifb-google' src='http://www.google.com'>" +
"<\/iframe>";
var ifb = Math.round(Math.random()*10)%2;
alert('ifb = '+ifb);
ifb = (ifb==0)? ifb1 : ifb2;
document.write(ifb);
</script>
</html>

 

[SAM]

Le 11/26/08 4:13 PM, howa a écrit :

On 11月26æ—¥, 下åˆ9時46分, howa <[email protected]> wrote:

changed charset in utf-8

online example: http://howachen.googlepages.com/a.html

OK, it is an error in your JS
You must escape '/' when writing the ending tags in variables:

<script type="text/javascript">

if( parseInt( Math.random() * 10 ) % 2 ) {

var ifb1 = "Yahoo: <iframe id='ifb-yahoo'
src='http://www.yahoo.com'><\/iframe>";
document.write( ifb1 );

} else {

var ifb2 = "Google: <iframe id='ifb-google'
src='http://www.google.com'><\/iframe>";
document.write( ifb2 );

}

</script>



The other way is :

var myVar = '<p>hello<'+'/p>';

Can also try :

var myVar = '<p>hello&lt;/p>';

 

[Thomas 'PointedEars' Lahn]

online example: http://howachen.googlepages.com/a.html

I am using Firefox3 to test it.

You should be more precise about your testing environment, like below.

Try to refresh and you will see in some cases, the "word" is
inconsistent with the iframe body.

Confirmed in "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.4)
Gecko/2008102920 Firefox/3.0.4", however ...

Thanks for any comments.

.... what happens if you make it Valid markup?

<http://validator.w3.org/>


PointedEars

 

[SAM]

Le 11/26/08 9:56 PM, Thomas 'PointedEars' Lahn a écrit :

... what happens if you make it Valid markup?

<http://validator.w3.org/>

Not enough (doctype)
<http://cjoint.com/data/lAxIT0EW6A_ifb.htm>
<http://validator.w3.org/check?uri=http://cjoint.com/data/lAxIT0EW6A_ifb.htm>

But OK when JS is corrected :
<http://cjoint.com/data/lAxL0GxN8c_ifb.htm>
<http://validator.w3.org/check?uri=http://cjoint.com/data/lAxL0GxN8c_ifb.htm>

Notice:
When iframe loads Yahoo! we have to wait a long time that the garbage of
this page have finished to take their place.

I placed a button to reload the file that seems to work better than this
of Firefox.
(don't know why)

 

[howa]

Hey,

Thanks for your testing efforts.

But OK when JS is corrected :
<http://cjoint.com/data/lAxL0GxN8c_ifb.htm>
...
I placed a button to reload the file that seems to work better than this
of Firefox.
(don't know why)

Ignornign the markup issue, I viewed your page (http://cjoint.com/data/
lAxL0GxN8c_ifb.htm) using FF3, and try pressing F5 to reload, rather
than using the reload button you provided, and you will see the 'bug'
here...

Also confirmed with IE7. (My favourite Opera 9.5 work ok.)


Thanks.

Thanks.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>
, Wed, 26 Nov 2008 18:14:35, SAM <[email protected]
alid> posted:

if( parseInt( Math.random() * 10 ) % 2 ) {

That takes the Number Math.random()*10 and converts it to a String
generally with a dozen or so decimal places then converts it back to an
integer Number before doing %2 .

See FAQ 5.5 for a general and efficient way of getting a random integer
from 1 to N; for N<2^32 (<2^31?), Math.floor() can be replaced by ()|0 .

For your case, if (Math.random()<0.5) should serve; it will not give
the same result, but that will not matter.

It's a good idea to read the newsgroup c.l.j and its FAQ. See below.