Set height for iframe when content has expanded items

Question

I have 2 iframes:

navigation
dynamic content

I'm resizing content using JavaScript:

function autoResize(id) {
    var newheight;
    newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
    document.getElementById(id).height = (newheight) + 'px';
};

The html is:

<iframe src="navigation.jsp" id="leftFrame" name="leftFrame" onload="autoResize('leftFrame');" frameborder="0" scrolling="auto" width="200" style="height: 100%;"></iframe>
<iframe src="" id="mainFrame" name="mainFrame" onload="autoResize('mainFrame');" frameborder="0" scrolling="no" width="200" style="height: 100%;"></iframe>

My dynamic pages have some expandable content, but when I'm clicking to expand content page hide its content. (scrollbar="no" for mainFrame )

I don't want to enable scrollbar for main frame because it shows two scrollbars (i.e. mainframe & browser scrollbar) What should i do to fix it?

don't use iframes, use divs and jquery instead – Carlo Moretti Sep 20 '12 at 14:02 — Carlo Moretti, Sep 20 '12 at 14:02

MassivePenguin · Answer 1 · 2012-09-20T14:28:25.437

1

You could try using jQuery's load() feature instead of iframes...

<body>
    <div id="nav"></div>
    <div id="content"></div>
</body>

<script>
    $(document).ready(function(){
        $('#nav').load('path/to/navigation');
        $('#content').load('path/to/dynamic content');
    });
</script>

edited Sep 20 '12 at 14:28

answered Sep 20 '12 at 14:05

MassivePenguin

3,701
4
24
46

Example added. Not 100% production-ready but enough to get you started. – MassivePenguin Sep 20 '12 at 14:29
$.load() added content but not like iframe does, it present data as it is, i just try .load(), but content scattered on page... – Shashank Oct 10 '13 at 11:00
Of course it would - you're loading the HTML into a different page, and HTML on its own *should* have no styling applied. If you want to import styles from another page, you'd need to check it for any linked stylesheets (or embedded styles), and append those to the `` of the current page. That's outside the scope of this question though. – MassivePenguin Oct 10 '13 at 12:06

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

autoResize only runs once, when the frame is loaded (as would jQuery's load()). You need to resize the frame every time the frame's content changes. That means trapping the resize event in the frame and calling autoResize on the parent from there.

edited May 23 '17 at 12:21

Community

1
1

answered Sep 20 '12 at 14:29

MarkFisher

516
4
15

Can u please give us a suitable example like where to use window.onresize = function(event) { } – Shashank Oct 10 '13 at 11:00

Set height for iframe when content has expanded items

2 Answers2