Call a parent function from inside an iFrame to change Element height

Question

I'm building my first website and I have a main element which is supposed to stretch to the height of the content of the iFrame. I need a click in NavBox.htm (also iFrame'd into the Index page) to display SubFolder/SubPage.htm (mostly plaintext) inside the main iFrame of Index.htm and call a function in Index.htm that changes the element's height depending on the length of the sub-page.

It works when a longer page is called, but if a shorter page is called, it actually grows by the padding size (20px) I added (if I take off the padding it just stays the same size). I'm pretty sure it's a simple mistake in my syntax, but I can't get the height to recalculate with a new page inside the element.

On Index.htm I have the following function that changes the element height:

function frm_onload(frmname) {
    frmname.frameElement.height = frmname.document.body.scrollHeight+20;
}

Further down is the actual iFrame call:

<iframe id="Center" width=98%; LANGUAGE=javascript ONLOAD="return frm_onload(Center)" marginwidth="0" marginheight="0" frameborder="0" ></iframe>

On the the NavBox.htm child page I have a link that changes the content of the element:

<a href="SubFolder/SubPage.htm" target="Center" onclick="document.getElementById('Center').src=SubFolder/SubPage">SubPage</a>

So if I'm thinking straight there's either something I'm not understanding from the function or I need the link in NavBox to do more. Thanks very much for any help you guys can provide!

You should maybe check this answer http://stackoverflow.com/a/19332928/532116 — Gilbou, Oct 12 '13 at 10:19

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

I answered a question very similar to this one here. You can use this function:

function addCSSToParent(url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.type = 'text/css';
    window.parent.document.getElementsByTagName('head')[0].appendChild(link);
}

// Add some CSS
addCSSToParent('some.css');

It will allow you to attach a .css file for styling the parent. You can access the parent document from inside an iframe it in jQuery with $(window.parent.document). So you would just need to either add a css file to the parent, or define the style of the element height using jQuery.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 18 '12 at 08:52

Aram Kocharyan

20,165
11
81
96

I already have a CSS file for the layout, but it's really basic, it just sets up the navbox. I've never used JS or jQuery before, so I'm not really sure what that code does. Currently the iFrame window is defined when the page is loaded through that function, but I don't know how to have the element's window size changed from the link that loads the new page. – Farlo Feb 18 '12 at 09:45
Sorry if I'm being vague, I'm not entirely sure what I'm doing. Basically I want to call the function above with the link so that it rescales the element's height to the new content. – Farlo Feb 18 '12 at 10:24
Is there any restriction for why you're using an iframe? You could load the data from that file with AJAX and put it into a div, for example. Then you could use the original script to read the contents once it's there. – Aram Kocharyan Feb 18 '12 at 13:46

Call a parent function from inside an iFrame to change Element height

1 Answers1