Forum Moderators: open

Message Too Old, No Replies

Javascript not working in FireFox

document.getelementbyid, onload, javascript,

         

agentthomas

4:59 pm on May 18, 2007 (gmt 0)

10+ Year Member



I have a page with 2 iframes. The content of frame 2 will not load properly unless the content of frame 1 is already in cache/memory. I have written code that solves this problem in IE7 but it's not working in FireFox 5.0. Firefox and IE7 are the only browsers that I have tested but I'm going to assume that other browsers may also be affected. Any help or ideas would be greatly appreciated.

<html>
<head>
<title> LANTERN RIDGE - Homes for Sale </title>

<script language="Javascript">

function LoadIframe()
{
document.getElementById("iframe1").src="http://example.com/MichaelThomas";
setTimeout("LoadIframe2()",900);

}
function LoadIframe2()
{
document.getElementById("iframe2").src="http://example.com/property/proplist.asp?

VAR_SearchSource=propsearch&VAR_City=SCOTTDALE&PRM_PropertyTypeCode=&PRM_Minimum_Price=&PRM_Maximum_Price=&PRM_Minimum_baths=&PRM_Minimum_Be

ds=&PRM_Minimum_YearBuilt=&PRM_Custom14=&PRM_Minimum_Acreage=&PRM_Custom11=&PRM_County=&PRM_Address=lantern";
}
</script>

</head>

<body onload="LoadIframe()">

<iframe name=iframe1 frameBorder=0 width="100%" height="200"></iframe>
<iframe name=iframe2 onLoad="window.scrollTo(0,0); return false" src="http://www.example.com/Loading.htm" frameBorder=0 width="100%"

height="2500"></iframe>

</body>
</html>

[edited by: encyclo at 7:09 pm (utc) on May 18, 2007]
[edit reason] examplified, see terms of service [/edit]

Fotiman

5:27 pm on May 18, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I see several problems.
1. You're missing a DOCTYPE
2. The "language" attribute for the script tag is not valid. Use type="text/javascript" instead.
3. You're trying to get your iframe's by id, but you forgot to give them an id.
4. It's better to call setTimeout with a function reference instead of a quoted string.
5. You should avoid mixing JavaScript in your HTML as attributes. Instead of body onload="...", attach the JavaScript to the window.onload event.
6. It's good practice to surround your attribute values with quotes.
7. There is no onload attribute for iframe.

Based on that, I've re-written your example. Note, I'm not sure whether or not the onload stuff will work for iframe2.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title> LANTERN RIDGE - Homes for Sale </title>
<script type="text/javascript">
// Global variables
var iframe1, iframe2;
window.onload = function() {
iframe1 = document.getElementById("iframe1");
iframe2 = document.getElementById("iframe2");
iframe1.src="http://example.com/MichaelThomas";
setTimeout( function() {
iframe2.src = "http://example.com/property/proplist.asp?VAR_SearchSource=propsearch&VAR_City=SCOTTDALE&PRM_PropertyTypeCode=&PRM_Minimum_Price=&PRM_Maximum_Price=&PRM_Minimum_baths=&PRM_Minimum_Beds=&PRM_Minimum_YearBuilt=&PRM_Custom14=&PRM_Minimum_Acreage=&PRM_Custom11=&PRM_County=&PRM_Address=lantern";
iframe2.onload = function() {
iframe2.window.scrollTo(0,0);
};
}, 900 );
};
</script>
</head>
<body>
<iframe name="iframe1" id="iframe1" frameBorder="0" width="100%" height="200"></iframe>
<iframe name="iframe2" id="iframe2" frameBorder="0" width="100%" height="2500" src="http://example.com/Loading.htm"></iframe>
</body>
</html>

Fotiman

5:29 pm on May 18, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Also, you should note that anyone who has JavaScript disabled will only get the loading page in the iframe2. That's not good. You may want to rethink your approach.