2

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.

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70
NictraSavios
  • 502
  • 2
  • 9
  • 29

4 Answers4

3

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.

Emzor
  • 1,380
  • 17
  • 28
Rob Welan
  • 2,070
  • 1
  • 11
  • 20
  • Thank you for the only answer that instead of telling me why something doesn't work, gave me something that does work, and is passable for the solution I actually wanted. – NictraSavios Mar 16 '16 at 00:02
  • My pleasure, happy the suggestion is helpful. – Rob Welan Mar 16 '16 at 00:03
  • This solution isn't perfect, the calc() in CSS isn't widely supported. If OP had specified a specific browser only then definitely the way to go, otherwise a slightly misleading answer. Be warned that this may look good on your up to date browser, but someone else viewing the page may see weirdness. http://www.w3schools.com/cssref/func_calc.asp – Erik Aug 03 '16 at 14:41
2

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.

Erik
  • 169
  • 6
  • I don't know why this was downvoted or why people downvote things without having the dignity to tell people why. This indeed is a secutiry measure to avoid js injection /spoofing in legitimate sites. – Iacchus Aug 02 '16 at 18:02
1

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.

Michael S
  • 141
  • 9
  • Set height to 100% on wrapping div – Michael S Mar 10 '16 at 04:20
  • @NictraSavios You shouldn't need the jQuery you have to achieve this effect. Let me know if this is still not working for you and I will put together a working example. – Michael S Mar 10 '16 at 21:00
  • It still isn't, here is a link to the actual site: http://atlantictutoring.com/booking/ I have the applet set to 100vh right now - its a good second. If the code worked, it would overwrite the 100vh. – NictraSavios Mar 11 '16 at 03:16
  • Ahh, I see what you mean now. When you click on the About tab, the height of the app does not readjust to page. This is a tricky one... does this help? http://stackoverflow.com/questions/525992/resize-iframe-height-according-to-content-height-in-it – Michael S Mar 11 '16 at 21:14
  • Sadly no, because I can't access their iframe. – NictraSavios Mar 13 '16 at 21:04
1

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.

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70