Dynamically add frames to frameset

Y

Yun

I have a frameset initially loaded to a page
<frameset id=SV name=SV></frameset>

Now I want to use JavaScript to dynamically add frames to this
frameset. I have tried to use code like "document.frames.SV.innerHTML
= framedefinition"
Nothing worked.

How do I achieve this goal with JavaScript?

Thanks.
 
Y

Yun

Your answer is NOT an answer to my question. It merely explained how
to access frames and their elements from JavaScrpt.
What I am looking for is to CREATE new frames in a empty frameset with
JavaScript functions.
 
S

Stefan Z Camilleri

I have a frameset initially loaded to a page
<frameset id=SV name=SV></frameset>

Now I want to use JavaScript to dynamically add frames to this
frameset.  I have tried to use code like "document.frames.SV.innerHTML
= framedefinition"
Nothing worked.

How do I achieve this goal with JavaScript?

Thanks.
Click to expand...

Hi Yun

If I understood you correctly, you want to dynamically add frames to
an existing element.

Try not to use innerHTML. This is not the correct way of working, and
even when it does, unfortunately some browsers (IE) will lead to
memory leaks if the elements are not added in the correct order.

The best approach, programmatically, is using the DOM's createElement
method, like so:

// first create your new frame
var newFrame = document.createElement("frame");
newFrame.id = "bar";
newFrame.name = "bar";
newFrame.src = "fooBar.html";

// then attach it as a child to whatever element you want
var frame = document.getElementById("parentFrame");
frame.appendChild( newFrame );

I hope this answers your question :)

Stefan
 
Y

Yun

It sounds like you are really good with DOM and frames. I have tried
to use createElement and then append. It works for DOM element in one
page and across frames. But it doesn't work for FRAME or FRAMESET
itself.
Would you like to provide a sample code to dynamically append new
frame to an existing frameset?
 
S

Stefan Z Camilleri

It sounds like you are really good with DOM and frames. I have tried
to use createElement and then append. It works for DOM element in one
page and across frames. But it doesn't work for FRAME or FRAMESET
itself.
Would you like to provide a sample code to dynamically append new
frame to an existing frameset?
Click to expand...

Of course!

function makeNewFrame(parentFrameId,newFrameId,targetUri) {
var newFrame = document.createElement("frame");
newFrame.id = newFrameId;
newFrame.name = newFrameId;
newFrame.src = targetUri;

var frameset = document.getElementById(parentFrameId);

frameset.appendChild(newFrame);
}

I am also remembering that you must bear in mind that a frameset
generally has a rows and cols property, which defines the initial
distribution. If you are adding new frames, you will need to amend
these, otherwise no space will be allocated to the new frame and thus
it won't be visible.

You can access these like so:

frameset.rows = "80, *, *"; // etc..etc..

Same for the cols property. Which you can set to null if you just
want these frames to appear one above the other.

Stefan
 
Y

Yun

Hi, Stefan,
Thank you SO MUCH. I appreciate your detailed instruction. It works
when I created a test script using your method. I was not accessing
the DOM element right. Probably got confused somewhere considering
this is a site with over 40 frames (some hidden, usually only 4 frames
shown, don't ask me why, it predates my job. :p )

<html>
<head>
<script>
function test() {
var t = document.createElement('frame');
t.id='top';
t.id='top';
t.src = '';
document.getElementById('fr').appendChild(t);
var t2 = document.createElement('frame');
t2.id='btm';
t2.id='btm';
t2.src = '';
document.getElementById('fr').appendChild(t2);
}
</script>
</head>
<frameset name=fr id=fr rows="100, *" onload="test()">

</frameset>
</html>
 
S

Stefan Z Camilleri

Hi, Stefan,
Thank you SO MUCH. I appreciate your detailed instruction. It works
when I created a test script using your method.  I was not accessing
the DOM element right. Probably got confused somewhere considering
this is a site with over 40 frames (some hidden, usually only 4 frames
shown, don't ask me why, it predates my job.  :p )

<html>
<head>
<script>
  function test() {
    var t = document.createElement('frame');
    t.id='top';
    t.id='top';
    t.src = '';
    document.getElementById('fr').appendChild(t);
    var t2 = document.createElement('frame');
    t2.id='btm';
    t2.id='btm';
    t2.src = '';
    document.getElementById('fr').appendChild(t2);
  }
</script>
</head>
<frameset name=fr id=fr rows="100, *" onload="test()">

</frameset>
</html>
Click to expand...

Glad to have been of help mate :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add Image and label dynamically inside the dropdown 2
How to control order of frames loading? 3
Controlling frames with javascript 3
How to add echo to .wav file in python ?? 3
frameset resizing 2
Avoid loading a particular frame in a frameset 2
frames and back action 7
Reframing a given page in a new frameset using javascript -- frames[0] goes to new location, but can 1

Members online

Total: 25 (members: 3, guests: 22)
Robots: 432

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top