Trying to insert table in iframe

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
raydona
Forum Newbie
Posts: 21
Joined: Sat Mar 21, 2009 9:17 am

Trying to insert table in iframe

Post by 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;
}
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Trying to insert table in iframe

Post by kaszu »

What I would like to do is insert a small table in the frame.
You can't because iframe location is a different page
I would also like to link a CSS file that controls the behaviour of the table.
CSS doesn't control behavior and you can't insert it for the same reason
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Trying to insert table in iframe

Post by Eran »

You can't because iframe location is a different page
Actually, you can access the iframe document and all of its children through the parent document using Javascript.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Trying to insert table in iframe

Post by kaszu »

Sorry, pytrin ir right. You can't access only if page is from different domain.

To add stylesheet:

Code: Select all

var doc = contents.contentWindow.document;
var head = doc.getElementsByTagName('head')[0];
 
var link = doc.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.src = 'PATH_TO_STYLESHEET';
 
head.appendChild(link);
To add div with some html

Code: Select all

var doc = contents.contentWindow.document;
var body = doc.getElementsByTagName('body')[0];
 
var div= doc.createElement('div');
    //Set html
    div.innerHTML = '<table><tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr><tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr></table>';
 
body.appendChild(div);
raydona
Forum Newbie
Posts: 21
Joined: Sat Mar 21, 2009 9:17 am

Re: Trying to insert table in iframe

Post by raydona »

Hi,
Many thanks for the replies. I followed the suggestion put forward and pasted the code shown below at various points inside the function show_hide_box() but nothing seems to be happening, i.e. no table is being shown.

var doc = contents.contentWindow.document;
var headID = doc.getElementsByTagName('head')[0];
var link = doc.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.src = 'temp table.css';
head.appendChild(link);
var doc = contents.contentWindow.document;
var body = doc.getElementsByTagName('body')[0];
var div= doc.createElement('div');
div.innerHTML = '<table><tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr><tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr></table>';
body.appendChild(div);

Is there something I'm not doing correctly? I just wanted to finish with two questions. Firstly, if the table were stored in a separate html file, would there be any way of loading the html file into the iframe (in which case I wouldn't have to load the style sheet as it would already be linked to the html file). Secondly, I've rarely used the term domain. Does the use of domain here mean a file being stored in a different server or in a separate directory but on the same server? Many thanks for your help.
Post Reply