;

PDA

Click to See Complete Forum and Search --> : document.write() works on Mac but not PC?


sigmundSquirrel
12-19-2006, 03:15 AM
Okay, I understand javascript logic but I'm apparently not up on all the cross-browser issues. Can anyone look at this code and tell me why it works on a Mac (Safari and Firefox) but not on a PC (IE and Firefox)? Seems pretty simple and straightforward to me.

I've got a frameset with a Flash navigation in the top frame and HTML content loads into the bottom frame. I'm grabbing the URL querystring to dynamically write the correct HTML into the bottom frame. This works fine on a Mac but not PC so I assume I'm missing some strict syntax or something?

You can check the behavior out at:

http://www.poddesign.com/myvu2 (try it on Mac and PC)

Looks fine on Mac. If there is no querystring (i.e., the first hit) it defaults to "home" -- if you click to "Products" then back to "Buzz" you'll see the querystring in the location bar. When you try it on a PC, the bottom is just blank. If you click on the Flash menu, it will load a new window because there is no frameset named "content" to receive it (because it isn't being dynamically written by the javascript). Grrrr...

Here's the HTML code:

------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>myvu</title>

<!-- HERE"S THE CODE TO GRAB THE QUERYSTRING AND ASSIGN A PAGE VARIABLE TO BE DYNAMICALLY WRITTEN IN A FRAME BELOW -->
<script type="text/javascript">
var thispage="home";
var URL_array=new Array();
URL_array[1]="home";
URL_array[2]="whatsnew";
URL_array[3]="products";
URL_array[4]="accessories";
URL_array[5]="buzz";
URL_array[6]="media";
URL_array[7]="faq";
URL_array[8]="wheretobuy";
URL_array[9]="shoppingcart";
categoryID = top.location.search;
if (categoryID.charAt(0)=="?") {
categoryID = categoryID.slice(10);
thispage=URL_array[categoryID];
}
</script>
</head>

<frameset cols="*,1024px,*" frameborder="0" framespacing="0" border="0">
<frame src="bg_left.html" />
<frameset rows="400px,*" frameborder="0" framespacing="0" border="0">
<frame name="nav" src="main.html" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" border="0" noresize="yes" />

<!-- HERE'S WHERE I DYNAMICALLY DOCUMENT.WRITE THE PAGE VARIABLE INTO THE FRAME -->
<script type="text/javascript">
document.write('<frame name="content" src="'+thispage+'.html" marginheight="0" marginwidth="0" frameborder="0" border="0" noresize="yes" />');
</script>

</frameset>
<frame src="bg_right.html" />
</frameset>

</html>

---------------------------------

Any help out there?

Thanks,
sigmundsquirrel

JPnyc
12-19-2006, 03:32 PM
document.write creates a new doc but not necessarily where you want it. You'd be better off writing to an existing frame than trying to create one on the fly.

sigmundSquirrel
12-20-2006, 03:33 AM
I solved it by document.writing() the entire frameset block instead of inserting a single frame tag. The final code is:

<script language="JavaScript">
<!--
var thispage="home";
var URL_array=new Array();
URL_array[1]="home";
URL_array[2]="whatsnew";
URL_array[3]="products";
URL_array[4]="accessories";
URL_array[5]="buzz";
URL_array[6]="media";
URL_array[7]="faq";
URL_array[8]="wheretobuy";
URL_array[9]="shoppingcart";
categoryID = top.location.search;
if (categoryID.charAt(0)=="?") {
categoryID = categoryID.slice(10);
thispage=URL_array[categoryID];
}
document.write(
'<frameset cols="*,1024px,*" frameborder="0" framespacing="0" border="0">',
'<frame src="bg_left.html" />',
'<frameset rows="400px,*" frameborder="0" framespacing="0" border="0">',
'<frame name="nav" src="main.html" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" border="0" noresize="yes" />',
'<frame name="content" src="', thispage, '.html" marginheight="0" marginwidth="0" frameborder="0" border="0" noresize="yes" />',
'</frameset>',
'<frame src="bg_right.html" />',
'</frameset>'
);
-->
</script>


Now if you go to http://www.poddesign.com/myvu2 it works real purrrty!

thanks,
sigmundsquirrel

rdoyle720
12-20-2006, 11:48 AM
Maybe I'm not understanding exactly what you want to do. You have a frameset, and you want to load different HTML pages into the bottom frame, you would just have to do a getURL and set the target to frame name, in this case, "content". Any reason why you can't do it that way?

sigmundSquirrel
12-20-2006, 12:50 PM
Thanks.

getURL() works AFTER everything is loaded and you've got the frameset in place -- you can navigate from the Flash and it will load the correct content into the bottom frame. But what happens the FIRST time you come to (and load) the frameset?

If it were always supposed to be the "Home" page by default that would be fine, but I've got situations where you might come to this site for the first load and it should open on "What's New" (or "Buzz" or any other category) instead of "Home" -- so I need a strategy where the browser can see what content page is supposed to be the "default" and load it into the bottom frame (and the Flash can see also and move it's menu highlight to the correct category...). After the page (the entire frameset) loads for the first time, then I can rely on getURL from within Flash to navigate and target content to the bottom frame. So this whole issue is about making the INITIAL load of the whole frameset flexible.

My solution is to append a query string to the page (e.g., "index.html?category=5" and have a javascript pull this variable and document.write() the correct content into the bottom frame.

Try this, go to these two links:

http://www.poddesign.com/myvu2/index.html

http://www.poddesign.com/myvu2/index.html?category=5

This way I can have links seeded on other sites that take people directly to a specific page within the site without having to create different framesets for that.

Of course, the best solution would be not to use frames at all, and make the whole site Flash, or use divs or iFrames -- but for various reasons, we had to go with frames.

rdoyle720
12-20-2006, 12:52 PM
Ah, makes sense.

sigmundSquirrel
12-20-2006, 01:02 PM
Now if I can just solve my other problem with javascript on the site.

(See my post -- http://board.flashkit.com/board/showthread.php?t=714339 )

On the "Buzz" page ( http://www.poddesign.com/myvu2/index.html?category=5 ) I've got some images that I want to initally show only a sliver of, and when you click, they expand to full size. Currently I'm using two classes ("open" and "closed") to style the image size and overflow properties of the image's containing div, and dynamically switch between the two classes onclick.

This works fine on any browser on a Mac, and also on Firefox on PC -- but alas, not IE on PC. So it's probably an ActiveX issue? I haven't been able to solve it. Take a look at my other post (listed above) if you want a crack at it...!

thanks,
sigmundsquirrel