View Full Version : a problem with frames

06-13-2007, 07:58 PM

I want to put an iframe (or a frame) in a page on my website, with the content in the iframe coming from another website. But I want the entire page to reload when (1) anyone clicks on any link in the iframe, and (2) anyone clicks on any button (after submitting a form) in the iframe.

Then why am I using an iframe? Well, that is a channel on my site being powered by the other site. So the look and feel should be mine, but the block in the iframe comes from them.

Is there any way to do this?

I had an idea (actually this idea was in another site, it's not mine) that I could put all my content in frames too (header, right side ad and footer), and write a JavaScript function like this that I would get the other site to put in the HTML of all its content that appears in the iframe:

function doThree(pageA,pageB,pageC)

and get every hyperlink on the other site look like this:

<a href="whatever" onclick="doThree('newpage1.html','newpage2.html','newpage3. html')">ONE LINK changes all frames</a>

The hassle is, they might crib about having to recode a zillion <a href> tags. So is there any way that this could be done in the CSS of the other site itself, by making every hyperlink (anchor tag) automatically run that onclick function, so that I do not have to worry about the manual effort of re-hardcoding several <a href>s, and the missing out that might happen?

I would really, really appreciate any pointers - either a solution to what I asked, or a completely different approach altogether :).

Again, I would want the frames belonging to my content (as opposed to the frame containing their content) to reload even when someone clicks on a submit button.

Thank you for reading this through!

06-14-2007, 12:33 AM
Is this what you want? This will load your 3 pages every time the iframe with external page is loaded, that is every time the url of that iframe changes.

function loadMyPages(pageA, pageB, pageC){
window.frames["frame1"].location.href = pageA;
window.frames["frame2"].location.href = pageB;
window.frames["frame3"].location.href = pageC;

<iframe src="http://www.othersite.com" onload="loadMyPages('newpage1.html','newpage2.html','newpage3.html')"></iframe>

<iframe name="frame1" src="mypage1.html"></iframe>
<iframe name="frame2" src="mypage2.html"></iframe>
<iframe name="frame3" src="mypage3.html"></iframe>

06-14-2007, 09:16 AM
Thanks a lot, Glenn! This indeed seems to be it. I will test further and let you know. Thanks again for such a simple solution!

06-14-2007, 01:41 PM
There's a small problem with that piece of code, though. The first time that I load the page, all the iframes (4 of mine, and 1 of the partner channel) load, but the moment the partner channel's iframe finishes loading, it reloads all my iframes. So, all my iframes load twice the first time.

Here is the URL. I am still testing this, so you might find some borders etc.


Do you have any ideas on how to overcome this? Thank you for your time, as always!

06-14-2007, 04:01 PM
var loaded = 1;
function loadMyPages(pageA, pageB, pageC){
if (loaded>1){
window.frames["frame1"].location.href = pageA;
window.frames["frame2"].location.href = pageB;
window.frames["frame3"].location.href = pageC;

06-14-2007, 07:27 PM
Thank you very much, Glenn! That fixes all problems... except one - would you know how I can make the height of the iframe coming from the partner site fit the height of the document (page) in the partner site that has loaded? I tried some stuff in w3 and other JS resources, but nothing seems to work.

Thanks again for all the help!

rnd me
06-15-2007, 08:23 AM
since you cannot access the properties of the framed document, you can't really do that.

it MAY be possible to set your iframe's scrolling to auto, and then do a little trick i learned:

have a loop to slowly increase the width of the iframe by 5px each time (use a setTimeout). then look at the computed height and width and watch for them to change on thier own since the last loop iteration.

often, when an iframe puts up it's scrollbars, it gets slightly bigger, and triggers a reflow.

i should mention an amazing script i came across the other day that might really be what you are looking for:
from http://www.dynamicdrive.com/.

the "dhtmlwindow" script lets you drag and drop iframe like window windows. you can resize, minimize, etc. i was really impressed...

06-16-2007, 06:14 PM
Thanks, rnd_me. Well, that script works only if the page in the iframe is of the same domain as the rest of the page :(. Mine is from a different domain.

Would anyone know of any workaround? Once again, this is the URL:


Thank you for your time!

06-16-2007, 06:31 PM
For security reasons, Javascript cannot access another page in a different domain. If you have an agreement with the external site, you can ask them to add that iframe script in their site.