Trying to insert table in iframe

[raydona]

Hi,

My problem might appear tedious but I really need help. I found the following code on a web site. It creates a small frame inside a web page. The code is too advanced for me to understand. However, it does the job for me. What I would like to do is insert a small table in the frame. I don't know if HTML code can be added to the existing code. If it can I don't know where. I would also like to link a CSS file that controls the behaviour of the table. How would I go about this? I'd be grateful for all help.

 

function move_box(an, box)

{ var cleft = 0;

var ctop = 0;

var obj = an;

 

while (obj.offsetParent)

{ cleft += obj.offsetLeft;

ctop += obj.offsetTop;

obj = obj.offsetParent;

}

 

box.style.left = cleft + 'px';

 

ctop += an.offsetHeight + 8;

 

//Handle Internet Explorer body margins, which affect normal document,

//but not absolute-positioned stuff.

if (document.body.currentStyle &&

document.body.currentStyle['marginTop'])

{ ctop += parseInt(

document.body.currentStyle['marginTop']);

}

box.style.top = ctop + 'px';

}

 

//Shows a box if it wasn't shown yet or is hidden or hides it if it is

//currently shown

function show_hide_box(an, width, height, borderStyle)

{ var href = an.href;

var boxdiv = document.getElementById(href);

 

if (boxdiv != null)

{ if (boxdiv.style.display=='none')

{//Show existing box, move it if document changed layout

move_box(an, boxdiv);

boxdiv.style.display='block';

 

bringToFront(boxdiv);

 

//Workaround for Konqueror/Safari

if (!boxdiv.contents.contentWindow)

boxdiv.contents.src = href;

}

else

//Hide currently shown box.

boxdiv.style.display='none';

return false;

}

//Create box object through DOM

boxdiv = document.createElement('div');

 

//Assign id equalling to the document it will show

boxdiv.setAttribute('id', href);

 

boxdiv.style.display = 'block';

boxdiv.style.position = 'absolute';

boxdiv.style.width = width + 'px';

boxdiv.style.height = height + 'px';

boxdiv.style.border = borderStyle;

boxdiv.style.textAlign = 'right';

boxdiv.style.padding = '4px';

boxdiv.style.background = '#FFFFFF';

document.body.appendChild(boxdiv);

 

var offset = 0;

 

//Remove the following code if 'Close' hyperlink is not needed.

var close_href = document.createElement('a');

close_href.href = 'javascript:void(0);';

close_href.onclick = function()

{ show_hide_box(an, width, height, borderStyle); }

close_href.appendChild(document.createTextNode('Close'));

boxdiv.appendChild(close_href);

offset = close_href.offsetHeight;

//End of 'Close' hyperlink code.

 

var contents = document.createElement('iframe');

//contents.scrolling = 'no';

contents.overflowX = 'hidden';

contents.overflowY = 'scroll';

contents.frameBorder = '0';

contents.style.width = width + 'px';

contents.style.height = (height - offset) + 'px';

 

boxdiv.contents = contents;

boxdiv.appendChild(contents);

 

move_box(an, boxdiv);

 

if (contents.contentWindow)

contents.contentWindow.document.location.replace(href);

else contents.src = href;

 

//The script has successfully shown the box, prevent hyperlink navigation.

return false;

}

 

function getAbsoluteDivs()

{ var arr = new Array();

var all_divs = document.body.getElementsByTagName("DIV");

var j = 0;

 

for (i = 0; i < all_divs.length; i++)

if (all_divs.item(i).style.position=='absolute')

{ arr[j] = all_divs.item(i);

j++;

}

return arr;

}

 

function bringToFront(obj) :'( :'(

{ if (!document.getElementsByTagName) return;

 

var divs = getAbsoluteDivs();

var max_index = 0;

var cur_index;

 

//Compute the maximal z-index of other absolute-positioned divs

for (i = 0; i < divs.length; i++)

{ var item = divs;

if (item == obj || item.style.zIndex == '') continue;

 

cur_index = parseInt(item.style.zIndex);

if (max_index < cur_index)

{ max_index = cur_index;

}

}

obj.style.zIndex = max_index + 1;

}

 

[RussellReal]

if it is an iframe pointing to a file on the same domain you should be able to do

 

iframe.contentDocument <-- to access that element's 'document' element. and then do some getElementByIds and stuff and then use .innerHTML.. if it ISN'T an iframe pointing to a file on YOUR domain, you'd want to use javascript injection.

 

iframe.src = "javascript:void(document.getElementById('holder').innerHTML = table);";

[raydona]

Hi,

Many thanks for the reply. The table I've created is stored in a file called table.html. I've also created an external style sheet called table.css and linked the style sheet to table.html.

<link rel="stylesheet" href="table.css">

 

It's after that I get stuck, don't know what to do. I only know how to call show_hide_box() as shown below:

<div>

<a href="#" onClick="return show_hide_box(this, 550, 270, '2px solid')">Click Here</a>

</div>

 

The pop-up window, table.html, table.css are all on the same domain. I've tried your suggestion and other variations but cannot get it to work. I just can't link table.html to the iframe created so that the formatted table appears in the iframe. I'd be very grateful if you could show me the code. It's frustrating me.

[meomike2000]

i as well have had much frustration trying to put things in a frame/iframe using ie, always works fine in fire fox....

 

todate, nobody here has been able to help me with a very similar problem, my solution was to change the frame/iframe to a div........

 

hope this helps,

mike.....

 

 

[RussellReal]

theIframe.contentDocument.show_hide_box()