Html 包含嵌入/发布的 Google 文档的 Iframe 的自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19009849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto height for Iframe containing embedded / published Google Doc
提问by celalalt
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?
我有一个带有已发布 Google Doc 的 iframe。该文档的内容可能会发生变化，因此我想根据其内容自动调整 iframe 的高度。我为此找到了一些解决方案，但它们都需要访问子文档的头部。有没有人知道如何做到这一点？
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>
回答by Radius Kuntoro
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.
但是，您可以将高度设置得更大并隐藏边框，这样 iframe 滚动条就不会出现并且文档看起来像是您网站的一部分。
回答by SW4
Simple answer...you cant
简单的答案...你不能
(sorry)
（对不起）
The reason is due to the cross domain policy(more, info) you cant access the iframechild document and therefore ascertain its heightin order to resize the iframeaccordingly, simply put
原因是由于跨域策略（更多，信息），您无法访问iframe子文档，因此无法确定其height以相应地调整大小iframe，只需将
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.
在计算中，同源策略是 Web 应用程序安全模型中的一个重要概念。该策略允许在源自同一站点的页面上运行的脚本（方案、主机名和端口号的组合）可以不受特定限制地访问彼此的 DOM，但会阻止访问不同站点上的 DOM。
[...]
[...]
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 iframe100% 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 iframecould:
看来您要这样做的原因与设计有关。因此，您可能希望查看在您的站点中实现内容 (iframe) 的不同方法，显而易见的一种是高度的自然限制是浏览器视口高度，因此可能因此使iframe视口 (html, body)的100% ） 高度？虽然如果页面上有其他组件，这会干扰您的设计……但还有其他选择……iframe可以：
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
与页面的一侧对齐，高度设置为 100%
放置在具有 100% 高度/宽度的弹出窗口或模式窗口中
被控制（JS）与父窗口一起拉伸，也许是固定的
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.
还请记住，因为这是对此类内容的全球限制，所以用户并非完全不习惯看到它，因此虽然它不是理想的设计选择，但它不一定会使您网站的访问者感到困惑/惊讶。
回答by Nj Subedi
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.
- 创建父 DIV 并在其上放置 iframe
- 尝试动态调整父 DIV 的大小
- 试图找到一个库来计算服务器端的高度
- 和大量的谷歌搜索。
The best approach is to use an available library.
最好的方法是使用可用的库。
Download the ZIP from the following URL and follow the simple installation instructions written there.
从以下 URL 下载 ZIP 并按照那里写的简单安装说明进行操作。
http://davidjbradshaw.github.io/iframe-resizer/
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.
它看起来很有希望，但我无法自己测试。如果您需要帮助，请查看它并发表评论。
回答by Stedman Blake
The first answer here worked for me! Full-screen iframe with a height of 100%
这里的第一个答案对我有用！高度为 100% 的全屏 iframe
<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>
回答by Fernando
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 100% 100% widht height 然后iframe显示块，100% width 100%vh 这是最终代码.. sry我不知道如何放置代码标签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
`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
回答by Alkis
Something similar has been asked here: Display full length of document for embed google document
这里有人问过类似的问题：Display full length of document for embed google document
The solution is to either use <embed>instead of <iframe>or to GETyour document via CORS request and put it wherever you want. The latter also allows you to style/modify the content.
解决方案是通过 CORS 请求<embed>代替<iframe>或使用GET您的文档，并将其放在您想要的任何位置。后者还允许您设置/修改内容的样式。
回答by Kyle Baker
While the content within the iframe, it's excessively difficult (not impossible, but certainly impractical).
而iframe内的内容，则过于困难（并非不可能，但肯定不切实际）。
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.
但是由于 Google Docs 的 CORS 政策，您可以使用我过去在 SO 其他地方找到的这段代码片段（将其保存在代码注释中，抱歉，我没有归属）来提取内容，然后在 iframe 之外使用它——换句话说，使用“iframe”仅作为发出请求的一种方式，然后格式化内容本身。然后，您可以像处理其他任何内容一样处理生成的 div 的高度。
<!--
// 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();
}
}
-->
回答by Akshay Mohite
#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>
