CODEWITHSUNDEEP
javascriptjqueryiframesize
NictraSavios
NictraSavios

Reputation: 519

iFrame not expanding to full content height, even with jQuery script targeting it

Here is the iFrame in question.

In the header I have the following jQuery Code:

<script>

    $(function(){

        var iFrames = $('iframe');

        function iResize() {

            for (var i = 0, j = iFrames.length; i < j; i++) {
              iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) {

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() {
                   this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
               });
            }

        });

</script>

The embedded looks like this:

 <div id="appointy">

<iframe src="//hfxtutoring.appointy.com/?isGadget=1" class="iframe" scrolling="no" frameborder="0" allowtransparency="true" style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;">
</iframe>

</div>

And the CSS is this:

/*  to ensure proper scrolling and overflow handling on mobile devices, put this styling in a div wrapper around the iframe because it's unreliable in css:   -webkit-overflow-scrolling: touch; overflow: auto; */

.iframe 
{
    border: none;
    width: 100%;
    margin-right: 10px;
    padding: 0;
    border: 1px
 }

What I want is for the iFrame to resize with the content height, not with a set height. I don't fully understand how to make it work like this example.

Upvotes: 2

Views: 2190

Answers (4)

David Bradshaw
David Bradshaw

Reputation: 13097

Dealing with iFrames is a 20 year old problem that still doesn't have an easy native option.

Looking at you code the iResize() function is not called. It will also only size the iFrame on page load, you also need to detect if the content changes, or the window resizes etc, their are around 20 different events that could cause the content to change size.

I would also point that using offsetHeight won't include the height of and margin on the body tag.

I wrote a lib that deals with most of the issues that iFrames present and it does a decent job of keeping an iFrame sized to your content. It even works cross domain with 3rd party sites if you have the ability to add JS to your iFrame.

You might find it helpful in solving this issue and the other problems iFrames will cause you.

https://github.com/davidjbradshaw/iframe-resizer

If you don't have access to add JS to the iFrame then it is not possible to do this with in the browser due to security protection features to stop you interfering with the remote site. If you want to understand how my project gets around this have a look at the postMessage API.

Upvotes: 1

Rob Welan
Rob Welan

Reputation: 2210

You could try CSS. Here is my codepen.

iframe {
  height: calc(100vh - 20px);
  width: calc(100vw - 40px);
}

I've added the calc function in order to give you an idea of how to further dynamically control the size of the height / width.

Upvotes: 3

Erik
Erik

Reputation: 169

You can't do this, it breaks the internet. If you could change or edit the content of the iframe you could cause massive chaos on the appointy site. This kind of stuff is prevented for good reason. Sadly 'change or edit' also means doing anything regarding the iframe's content, including just querying against it.

This would be cake if you could enable CORS on the appointy site and your server. This would let you run a script to get the height of the scrollable div and then you could simply set the height of your iframe from there.

Otherwise you can't do this. You just can't get the height of the content within the iframe because of the rules implemented against cross-site/cross-origin scripting.

var y = $("iframe")
y.contents()

Any action attempted on the iframe (in chrome) will result in: jquery.min.js:2 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://atlantictutoring.com" from accessing a cross-origin frame.(…)

If your app was a subdomain of appointy then you could also do this, but there's rules set up to prevent you from spoofing a different domain. :/

Also using Chrome's dev console to manually tweak the css at the appointy url reveals that the scrollbar is a JS scrollbar, so there's a whole other load of stuff to deal with there.

Upvotes: 2

Michael S
Michael S

Reputation: 141

Have you tried adding allowfullscreen to the iframe?

<iframe src="{URL}" {other params}  allowfullscreen></iframe>

You may need to adjust the wrapping div's CSS as well.

Upvotes: 1

Related Questions