How can I dynamically change the height of an iFrame?

Question

How can I dynamically change the height of an iFrame containing a Pardot form? I have a Pardot form that is placed on a page in my site via iFrame. I have tried a number of ways to dynamically resize the iFrame depending on the size of the form. When a user submits the form, much of the data is stored and the forms becomes shorter the next time the page is viewed. The iFrame code is as follows:

<iframe 
    src="http://go.pardot.com/..." 
    width="100%" 
    type="text/html" 
    frameborder="0" 
    allowTransparency="true" 
    style="border: 0" scrolling="no" 
    id="iframe" 
    onload="javascript:resizeIframe(this);">

</iframe>

The javascript is as follows:

function resizeIframe(obj) 
{
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

Looks like you've a third-party page loaded on the `iframe`. If so, you [can't access](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) the document within `iframe`. If it's not a third-party content, just remove the `height` attribute from the `iframe` tag. Where's Java? — Teemu, Apr 17 '14 at 20:28
Most browsers won't let javascript access the contents of an iframe from a different domain. However, you'll have much better luck with onreadystatechange than you will with onload. — Dave, Apr 17 '14 at 20:52
@Dave What you mean with "most browsers"? Any of them won't. If they would, that would be a huge security risk. — Teemu, Apr 17 '14 at 20:53
Java and Javascript have very little in common. Your code is Javascript, not Java. — Lee Taylor, May 12 '14 at 21:32
@Teemu - To be pedantic, one could take an open source browser and compile it to allow such actions :-D — Lee Taylor, May 12 '14 at 21:33

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

1

There is a good thread about that here: Resizing an iframe based on content And iframe resize lib here https://github.com/davidjbradshaw/iframe-resizer (I haven't yet check that plugin, but hope it could help you)

Articles above contain many usefull links.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 12 '14 at 10:42

Rantiev

2,121
2
32
56

score 0 · Answer 2 · edited May 12 '14 at 21:27

0

Try using CSS to assign a class, called mine frame-pardot and don't set the height.

.frame-pardot {
    min-height:200px;
    max-height:800px;
    width:100%;
}

<iframe src="????????????" class="frame-pardot" scrolling="no">

Then you can also adjust for mobile devices using @media

edited May 12 '14 at 21:27

Lee Taylor

7,761
16
33
49

answered May 12 '14 at 20:56

HPC

16
1

score 0 · Accepted Answer · answered Jan 31 '17 at 14:05

HTML:

<div class="ebookContainer">
<iframe class="ebookFrame" src="http://iFrameURL.com" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</div>

CSS:

.ebookContainer {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.ebookFrame {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

How can I dynamically change the height of an iFrame?

3 Answers3