Forum Moderators: open
Very green to javascript. As per the title, I have two frames, one across the top of the page for the menu and an image which is called menu_frame, and the main content frame which is called content_frame.
Menu_frame contains a picture, the html for which is generated by a script get_picture(). get_picture returns an html <img> string.
What I want to do is have the picture refresh within menu_frame each time somebody loads a new page in main_frame.
The first time menu_frame loads get_picture is called inline. I have put this call inside a div.
<div id="image_div">
<script type="text/javascript">get_picture();</script>
</div>
This works well. Now when somebody loads a page in content_frame I want get_picture() to update the div contents. I have tried adding the following script to the <head> section of menu_frame.
function refresh_image()
{
document.getElementById('image_div').innerHTML = get_picture();
}
then call this from the <head> section of pages being loaded in content_frame using
parent.menu_frame.refresh_image().
I can successfully call the function but document.getElementById('image_div') always returns null. I have tried top.frames['image_div'].getElementById('image_div') but that does the same.
Any advice or alternative solutions received with thanks.
index.html:
<html>
<frameset cols="268,*" border="1" bordercolor="#7095d3">
<frame src="menu.html" frameborder="no" name="menu_frame" scrolling="auto">
<frame src="main.html" frameborder="no" name="content_frame">
</frameset>
</html>
----------------------------------
menu.html:
<html>
<head>
function refresh_image()
{
document.getElementById('image_div').innerHTML = get_picture();
}
</head>
<body>
Here is a little bit of text. Below is a picture the html
for which is generated by the get_picture() function.
get_picture just returns a string in the form '<img src="pic.jpg">'
where pic.jpg refers to a different picture each time. the
get_picture function is defined in a separate .js file.
<div id="image_div">
<script type="text/javascript">get_picture();</script>
</div>
</body>
</html>
----------------------------------
main.html:
<html>
<head>
parent.menu_frame.refresh_image().
</head>
<body>
The body text goes here. When this page loads then the function above
gets called, which it was intended would call the get_picture() function
and place the returned string into the <div> defined in menu.html. But
the div and the refresh_image() functions are in a different frame of
this frame set.
</body>
</html>
[edited by: whoisgregg at 8:44 pm (utc) on June 4, 2009]
[edit reason] Whoops, no URLs please. See TOS & Forum Charter. :) [/edit]
