[AmberLR]

Hi all,

For work, I am making a page that uses an iframe to display a Flash animation. There are 2 versions of said Flash animation, and depending on which button the user clicks, the iframe source is changed to display the correct animation. (One of the animations is also the default, if the user has not selected one or the other yet.) The code also sets a cookie to remember which animation the user selected, so that will be the one to load whenever they come back to the page. (It's for a medical web site, and there is a male and female version.)

I have gotten everything working properly in IE 6 Windows, IE 5 Mac, Firefox Mac and Windows, Netscape 7 Mac and Windows, and Opera 7 Mac and Windows. However, I cannot get it to work on Safari -- which is odd, since Safari is a browser I usually have the least amount of trouble with. There seem to be two separate problems with it in Safari: 1) the cookie is not getting set, and 2) the male animation will not load; if the user selects male, it just reloads the female animation.

Here is my current code.
This is the function that sets the cookie (this is a standard function that we use across our site in many places; I did not write it).

Code:

function setCookie( theName, theValue, bExpires, thePath )
{
  var theCookie = theName + "=" + escape(theValue) + ";";
  if (bExpires) {
    var numHours = (new Date((new Date()).getTime() + 3600000)).toGMTString();
    theCookie += " expires=" + numHours + ";";
  }
  if (thePath != ""){
   theCookie += " path=" + thePath;
  }
  document.cookie = theCookie;
}

This is the function that changes the source of the iframe:

Code:

/* Set the source of the iframe based on which gender the user selected */
function setiFrame (url, which) {

	var theFrame = document.getElementById('flashmovie');
	if (theFrame) {
		theFrame.src = url;
	}
	setCookie( "scGender", which, "", "/" );
}

And here is where it is called in the HTML:

Code:

<script type="text/javascript" language="Javscript">
	var movieSrc;
	var gender = getCookie("scGender");
	
	if (gender == "male") {
		movieSrc = "sc_male.html";
	}
	else {
		movieSrc = "sc_female.html";
	}
	
	document.write('<iframe height="380" frameborder="0" scrolling="no" src="'+movieSrc+'" id="flashmovie" name="flashmovie" style="margin: 0px 0px 0px 80px; vertical-align: top;"></iframe>');
	</script>
	<br>
	 
	<!-- Male and Female buttons -->
	<a href="" onclick="setiFrame('sc_male.html', 'male'); return false;"><img src="images/malebutton.gif" width="87" height="22" alt="Male" border="0" style="margin-left: 80px;"></a>&nbsp;&nbsp;
	<a href="" onclick="setiFrame('sc_female.html', 'female'); return false;"><img src="images/femalebutton.gif" width="87" height="22" alt="Female" border="0"></a>

With this code, Safari loads neither animation. Nothing on initial load, and nothing upon clicking one of the buttons.

With this code (which is an older version, that doesn't include cookies), Safari displays the female animation on load (correct) but will not display the male animation, even if the 'male' button is clicked. Note that the female animation is hard-coded as the initial src for the iframe in this version.

Code:

<iframe height="380" frameborder="0" scrolling="no" src="sc_female.html" id="flashmovie" name="flashmovie" style="margin: 0px 0px 0px 80px; vertical-align: top;"></iframe>
	<br>
	 
	<!-- Male and Female buttons -->
	<a href="" onclick="setiFrame('sc_male.html', 'male'); return false;"><img src="images/malebutton.gif" width="87" height="22" alt="Male" border="0" style="margin-left: 80px;"></a>&nbsp;&nbsp;
	<a href="" onclick="setiFrame('sc_female.html', 'female'); return false;"><img src="images/femalebutton.gif" width="87" height="22" alt="Female" border="0"></a>

Sorry for the long-winded post. Any help would be greatly appreciated. Thanks! As an aside.... yes, I know iframes and Flash suck, but I can't help it, I just work here!

[bnoorda]

I've also encountered this problem in safari. It often seems to ignore whatever you put into src. My workaround has been that whenever I change src I also have to change the id of the iframe to some new value. This may require deleting the old iframe node and making an entirely new one, with a new id, to replace it. I haven't enjoyed doing this, but it works for me.