Reputation: 231
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>
Upvotes: 18
Views: 34841
Reputation: 317
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:
The best approach is to use an available library.
Download the ZIP from the following URL and follow the simple installation instructions written there.
It looks promising but I am not able to test it myself. Have a look at it and post comments if you need help.
Upvotes: 1
Reputation: 566
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>
Upvotes: 0
Reputation: 3712
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();
}
}
-->
Upvotes: 0
Reputation: 141
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.
Upvotes: 0
Reputation: 1
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
Upvotes: 0
Reputation: 919
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>
Upvotes: 0
Reputation: 109
#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>
Upvotes: 0
Reputation: 71230
(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.
[...]
If you don't have control over the framed site, you cannot circumvent the cross-domain policy.
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:
Be aligned to one side of the page with 100% height set
Be placed within a popup or modal window with 100% height/width
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.
Upvotes: 6
Reputation: 448
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.
Upvotes: 5