18

I have an iframe with a published Google Doc. The contents of that doc are subject to change, so I want to auto adjust the height of the iframe based on its content. I found some solutions for this, but they all require access to the head of the child document. Does anyone have an idea on how to do this?

You can view an excerpt of the code I use below:

#faq{
height: 800px;
overflow: hidden;
position: relative;
width: 660px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
}

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:900px;width:832px;position:absolute;top:-92px;left:-150px;right:0px;bottom:0px;z-index:0;" height="900px" width="832px"></iframe></div>
David
  • 4,786
  • 11
  • 52
  • 80
celalalt
  • 231
  • 1
  • 2
  • 7
  • Share your code for this... Also, visit http://stackoverflow.com/help/on-topic – Paritosh Sep 25 '13 at 16:20
  • Here is an example of a page getting its content from a Google Doc: http://images.open-org.com/OO-developers/PhotoAccounting/faq.php – David Mar 18 '14 at 12:42
  • @David link seems to be broken – JF it Mar 18 '14 at 12:43
  • @JFit I did not expect such a fast response, so I updated the page, so it was down for a few minutes. The link works now. – David Mar 18 '14 at 12:57
  • @David Think this isnt' possible.. cross origin policy doesn't allow us to access the frame contents as the domains don't match.. so theres no way to get the inner elements height/contents/attributes.. think im about ready to give up :/ – JF it Mar 18 '14 at 14:07
  • @David Check out this link.. total Hack but looks very promicing.. http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content – JF it Mar 18 '14 at 14:11
  • @JFit In that link it says: "There is a way around the same origin policy, but it requires changes on both the iframed content and the framing page, so if you haven't the ability to request changes on both sides, this method won't be very useful to you, i'm afraid." I could utilize PHP to download the Google Doc, though so it would be on the local domain. Shouldn't that work? – David Mar 18 '14 at 14:31
  • 1
    Yes getfilecontents in PHP should probally.. maybe work.. yes.. That method ignores the same origin policy afaik. – JF it Mar 18 '14 at 14:55
  • 1
    @JFit We have implemented this method successfully now. Thank you! – David Apr 02 '14 at 19:21
  • You can make a trick by proxing google docs by your server and insert link to same domain as your site: – alex_1948511 Nov 29 '18 at 10:17

9 Answers9

6

Simple answer...you cant

(sorry)

The reason is due to the cross domain policy (more, info) you cant access the iframe child document and therefore ascertain its height in order to resize the iframe accordingly, simply put

In computing, the same-origin policy is an important concept in the web application security model. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites.

source

[...]

If you don't have control over the framed site, you cannot circumvent the cross-domain policy.

source

And if you cant do this, you cant do what you want because there is no way of ascertaining the child document's height.

It seems the reason you want to do this is design related. As such, you may want to look at different ways to implement the content (iframe) within your site, the obvious one being that the natural restriction on height is browser viewport height, perhaps therefore make the iframe 100% of the viewport (html, body) height? Although this will interfere with your design if there are other components on the page...but there are alternatives...the iframe could:

  1. Be aligned to one side of the page with 100% height set

  2. Be placed within a popup or modal window with 100% height/width

  3. Be controlled (JS) to stretch with the parent window, perhaps with a fixed bottom

Also remember that because this is a global restriction on this kind of content, users are not completely unused to seeing it so though it isnt an ideal design choice, it isnt necessarily one which will confuse/suprise visitors to your site.

Community
  • 1
  • 1
SW4
  • 69,876
  • 20
  • 132
  • 137
5

There's no current way to do this.

You can, however, make the height a lot larger and hide the borders, this way the iframe scrollbar won't appear and the document will appear to be a part of your website.

Radius Kuntoro
  • 448
  • 3
  • 9
  • 1
    surely you need the scroll bar. What if the document is larger than the iframes heght. Also surely the if the iframe had a huge height value if would make your page scroll even if the document was a few lines in height – Richard Banks Sep 25 '13 at 16:11
  • @RichardBanks no, what he's saying is ensure you set the height of the iframe higher than the Google Doc height. It can be done. However, the downside is that if the document is edited and becomes longer, then the scroll bar will come back. – Xarcell Mar 18 '14 at 13:53
  • unless you have y-overflow hidden... then the document just becomes cut-off. – Kyle Baker May 09 '19 at 18:08
1

The bad news is that the cross domain policy will not let you do that in any way around. I spent a couple hours trying to work around, which included:

  • Creating a parent DIV and fit the iframe on it
  • Trying to dynamically resize the parent DIV
  • Trying to find a library to calculate the height in Server side
  • and a lot of googling.

The best approach is to use an available library.

Download the ZIP from the following URL and follow the simple installation instructions written there.

http://davidjbradshaw.github.io/iframe-resizer/

It looks promising but I am not able to test it myself. Have a look at it and post comments if you need help.

Nj Subedi
  • 317
  • 4
  • 15
  • 3
    As per the documentation on github for `iframe-resizer`, it also requires an access to the site with iframe's content (to put a JS file there). So, it seems that in it's current (at the time of writing this comment) state it cannot be used for the required task either. – davke Sep 29 '16 at 13:05
0
#faq{
position: relative;
width: 832px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
height: 100%
}
#faqif{}
.bgcolor_patch{position: absolute; right: 0; top:0; height: 100%; width: 20px; background: #fff; }

 $(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" height="100%" width="832px" frameborder="0"></iframe>
<div class="bgcolor_patch"></div>
</div>
Akshay Mohite
  • 109
  • 3
  • Thank you for your answer. I have attempted to set it up here: http://possiblypublicfiles.s3.amazonaws.com/deleteme/doc-embed.html I am really on the limits of my knowledge here, so I could very well be making mistakes. I, however, got an error: "Error: Permission denied to access property 'document'" The document is currently showing a scrollbar in the iframe, which is not what I had hoped for, but rather that the web page would have the same height as the iframe, removing the need for a scroll bar on the iframe. – David Mar 18 '14 at 14:20
  • check this http://jsfiddle.net/nT9bj/ i add css class "bgcolor_patch" to hide scroll bar on the iframe. – Akshay Mohite Mar 19 '14 at 06:04
  • The height on that jsfiddle is not the same as the height of the Google Doc. – David Mar 19 '14 at 09:47
  • we cant remove scroll bar from iframe but we can hide it. You need to replace http://jsfiddle.net/nT9bj/ code to your doc-embed.html (possiblypublicfiles.s3.amazonaws.com/deleteme/doc-embed.html ) which was earlier given by you. Then it will take same height as browser height. – Akshay Mohite Mar 20 '14 at 07:42
  • This will only work with iframe content from the same domain as the host page. As Google docs is on a different domain you get the permission error. Only way around this would be to have your server proxy the content from Google Docs. – David Bradshaw Mar 21 '14 at 23:22
  • I updated code in answers section regarding An iframe with a published Google Doc with to auto adjust the height of the iframe based on its content. Because of cross domain policy you will get permission error. but it will not shown on page....so no need to worry :) (Y) – Akshay Mohite Mar 24 '14 at 07:25
0

The first answer here worked for me! Full-screen iframe with a height of 100%

    <body style="margin:0px;padding:0px;overflow:hidden">
      <iframe src="http://www.youraddress.com" frameborder="0"
        style="overflow:hidden;height:100%;width:100%" height="100%"
        width="100%">                       
      </iframe>
    </body>
Community
  • 1
  • 1
Stedman Blake
  • 899
  • 6
  • 5
0

i was having the same problem. Here is The solution You have to set the body 100% 100% widht height Then the iframe display block, 100% width 100%vh Here is the final code.. sry i dont know how to put the code tag xd

`body style="margin: 0px; padding: 0px; width: 100%; height: 100%;" div style="height: 100%; width: 100%; display: block;" iframe frameborder="0" style="height: 100vh; width: 100%; display: block;" width="100%" height="100%" src="https://docs.google.com/spreadsheets/d/1SizkrPE97j1TouBmohPjCj0ZB-MxYQtRSKotHyxT8Y8/edit#gid=0"/iframe div

Fernando
  • 1
  • 1
0

Something similar has been asked here: Display full length of document for embed google document

The solution is to either use <embed> instead of <iframe> or to GET your document via CORS request and put it wherever you want. The latter also allows you to style/modify the content.

Alkis
  • 131
  • 1
  • 5
0

While the content within the iframe, it's excessively difficult (not impossible, but certainly impractical).

But because of the CORS policy of Google Docs, you could use this code snippet I found elsewhere on SO at some point in the past (have it saved in a code comment, sorry, I don't have attribution) to extract the content, and then use it outside the iframe--in other words, use the 'iframe' only as a way to make a request, and then format the content itself. You can then handle the height of the resulting div just like any other.

    <!--
      // get all iframes that were parsed before this tag
    var iframes = document.getElementsByTagName("iframe");

    for (let i = 0; i < iframes.length; i++) {
        var url = iframes[i].getAttribute("src");
        if (url.startsWith("https://docs.google.com/document/d/")) {
            // create div and replace iframe
            let d = document.createElement('div');
            d.classList.add("embedded-doc"); // optional
            iframes[i].parentElement.replaceChild(d, iframes[i]);

            // CORS request
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function() {
                // display response
                d.innerHTML = xhr.responseText;
            };
            xhr.send();
        }
    }
    -->
Kyle Baker
  • 3,424
  • 2
  • 23
  • 33
0

I have a working solution, basically, you have to force the hosting page to MAKE space for the iframe. It is a kludge, but creating an HTML table works for me on myuki.BlogSpot.com:

<table width="100%" height="800px" border="0">
  <tr>
    <td>
     <iframe src="https://docs.google.com/document/d/e/2PACX-1vTaRY68GO9FWHU8K64bqGUVD1V_FKxKqlpeeEBT44UZvwe_vi62hDh-yJM5bKPrDR6B-a96BeRTzejx/pub?embedded=true" 
              frameborder="0"
              height="100%"
              width="100%">                       
      </iframe>
    </td>
  </tr>
</table>
Uki D. Lucas
  • 516
  • 6
  • 4