Forum Moderators: open
I am working on a site for a cleint that sells handbags. The pages that display the bags is boroken in to three colums that will display different information and I am plannng to use iframes.
iframe1 will contain the large image of the handbag
iframe2 will contain the description, price, an add to cart button
iframe 3 will contain the thumbs of each hand bag.
I would like the page contained in iframe3 "scr" to have a onload fucntion that will load the page needed in iframe2 and iframe1 or just have the page in iframe3 load the page needed in to iframe 2 then have the page loaded in iframe2 load the page needed for iframe1.
Thanks,
shawn
How about a function that changes the href of the iFrames?
function populateFrames(href1, href2) {
document.getElementById('frame1ID').location.href=href1;
document.getElementById('frame2ID').location.href=href2;
}
Then, your onLoad would be:
onLoad="populateFrames('page1.html','page2.html');"
HTH
Caveat: Totally untested...
function populateFrames(href1, href2) {
document.getElementById('frame1ID').location.href=href1;
document.getElementById('frame2ID').location.href=href2;
}
Does this go in to the page like this:
<script type="text/javascript">
function populateFrames(href1, href2) {
document.getElementById('frame1').location.href=href1;
document.getElementById('frame2').location.href=href2;
} </script>
Forgive my ignorance! I am not a programmer!
Shawn
The format you have above is correct, and it goes between the <head> and </head> tags.
The onLoad will go in the <body> tag.
Thanks for all your help.
Yes - use id="frame1", or else change the JS function to getElementByName()...
HTH
This is teh way I have it now:
You click a link from the main page - this takes you to pageB
On pageB I have 3 iframes that need to be populated by 3 seperate pages.
PageB has the javascript.
The error says that - document.getElementById('frame1').location.href=href1; is null or not an object.
I changed the iframes to have id="frame1" etc..
How are you calling the JS function? Are you putting the url's in inverted commas?
onLoad="populateFrames('page1.html','page2.html');"
and thi si show I have it on my page:
onLoad="populateFrames('bag-main-page.htm','bag-center-main.htm');"
Shawn
<iframe id="frame1"></iframe>
<iframe id="frame2"></iframe>
<iframe id="frame3"></iframe>
<script language="JavaScript">
<!--
function populateFrames(href1, href2) {
document.getElementById('frame1').location.href=href1;
document.getElementById('frame2').location.href=href2;
}
-->
</script>
Then, in your frame 3, you have something like this:
<body onLoad="populateFrames('bag-main-page.htm','bag-center-main.htm');">
if this is correct, your script will not work because the script you want to call is on pageB, but since an iframe works like a window, it is trying to call the function populateFrames in your frame3.
If you put the function in the source for your pageB and your frame3 contains the onload, then try putting parent.populateFrames instead of just populateFrames in the onload handler, like this:
<body onLoad="parent.populateFrames('bag-main-page.htm','bag-center-main.htm');">
This will call the JavaScript on the pageB page and then document.getElementById('frame1') will return an object and it should work fine.
Hope this helps.
Hi Shawn, I think you have a scoping problem. If I read all this correctly, you have a page (pageB) that has something like this:
<iframe id="frame1"></iframe>
<iframe id="frame2"></iframe>
<iframe id="frame3"></iframe>
<script language="JavaScript">
<!--
function populateFrames(href1, href2) {
document.getElementById('frame1').location.href=href1;
document.getElementById('frame2').location.href=href2;
}
-->
</script>Then, in your frame 3, you have something like this:
<body onLoad="populateFrames('bag-main-page.htm','bag-center-main.htm');">
if this is correct, your script will not work because the script you want to call is on pageB, but since an iframe works like a window, it is trying to call the function populateFrames in your frame3.
If you put the function in the source for your pageB and your frame3 contains the onload, then try putting parent.populateFrames instead of just populateFrames in the onload handler, like this:
<body onLoad="parent.populateFrames('bag-main-page.htm','bag-center-main.htm');">
This will call the JavaScript on the pageB page and then document.getElementById('frame1') will return an object and it should work fine.
Hope this helps.
This is how I have it set up:
Between Head Tags:
<script type="javascript/text"
function populateFrames(href1, href2) {
document.getElementById('frame1').location.href=href1;
document.getElementById('frame2').location.href=href2;
}
</script>
In the Body tag: onLoad="populateFrames('bag-main-page.htm','bag-center-main.htm');"
Then in my iframe: </iframe id="frame1"><iframe>
</iframe id="frame2"><iframe>
Iframe3 I have the scr="page.htm" so it is already populated.
The id should be on the opening tag.
Your containing (main) page holds the JS function in the <head> and the onLoad in the <body> and in the html your iFrame calls like this:
<iframe id="iframe1" ...></iframe>
<iframe id="iframe2" ...></iframe>
HTH
<iframe id="iframe1" ...></iframe>
<iframe id="iframe2" ...></iframe>
That is the way I have it - I have no idea why I posted in the reverse in my earlier post!
<script type="text/javascript">
function populateFrames(href1,href2) {
document.getElementById('frame1').location.href=href1;
document.getElementById('frame2').location.href=href2;
}
</script>
<style type="text/css">
<!--
body {
background-color: #E189C8;
}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #CCCCCC;
}
a:hover {
color: #D90097;
}
.style3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style4 {font-size: 16px}
.style5 {
color: #FFFFFF;
font-size: 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
-->
</style></head>
<body onload="populateFrames('bags-main-large.htm','bags-center-all.htm');">
Your populateFrames function needs to be in whatever file you have this:
<iframe id="iframe1" ...></iframe>
<iframe id="iframe2" ...></iframe>
Also, this:
<body onload="populateFrames('bags-main-large.htm','bags-center-all.htm');">
