Question

我有一个已发布的Google文档的iframe。该文档的内容可能会发生变化，因此我想根据内容自动调整iframe的高度。我找到了一些解决方案，但它们都需要访问子文档的头部。有没有人知道如何做到这一点？

您可以查看我在下面使用的代码的摘录：

#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>

Answer 1

目前没有办法做到这一点。

但是，您可以将高度设置得更大并隐藏边框，这样iframe滚动条就不会出现，文档也会显示为您网站的一部分。

Answer 2

简单回答......你不能

（对不起）

原因是由于cross domain policy（more，info）您无法访问iframe子文档，因此确定其height以便相应调整iframe的大小，只需输入

即可

在计算中，同源策略是一个重要的概念 Web应用程序安全模型。该策略允许运行脚本源自同一网站的页面 - 方案的组合，主机名和端口号 - 访问彼此的DOM没有具体限制，但阻止访问不同的DOM 位点。

source

[...]

如果您无法控制框架网站，则无法规避跨域政策。

source

如果你不能这样做，你就无法做你想做的事，因为无法确定儿童文件的高度。

您想要这样做的原因似乎与设计有关。因此，您可能希望查看在您的网站中实现内容（iframe）的不同方式，显而易见的一点是对高度的自然限制是浏览器视口高度，因此可能使iframe 100％的视口（html，body）高度？虽然如果页面上还有其他组件，这会干扰您的设计...但是有其他选择...... iframe可以：

与100％高度设置的页面一侧对齐
放置在100％高度/宽度的弹出窗口或模态窗口中
被控制（JS）与父窗口一起伸展，可能是固定的bottom

还要记住，因为这是对此类内容的全局限制，用户并非完全不习惯看到它，所以尽管它不是一个理想的设计选择，但它不一定会使访问者感到困惑/困惑。< / p>

Answer 3

坏消息是跨域政策不允许您以任何方式执行此操作。 我花了几个小时试图解决，其中包括：

创建父DIV并在其上放置iframe
尝试动态调整父DIV的大小
试图找到一个库来计算服务器端的高度
和很多谷歌搜索。

最好的方法是使用可用的库。

从以下URL下载ZIP，并按照其中的简单安装说明进行操作。

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

看起来很有希望，但我自己无法测试。如果您需要帮助，请查看并发表评论。

Answer 4

#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>

Answer 5

这里的第一个答案对我有用！ 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>

Answer 6

我遇到了同样的问题。这是解决方案您必须将身体设置为100％100％的高度然后是iframe显示块，100％宽度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 格

Answer 7

有人问过类似的问题：Display full length of document for embed google document

解决方案是使用<embed>而不是<iframe>或通过CORS请求GET将文档放置在所需的位置。后者还允许您对内容进行样式/修改。

Answer 8

iframe中的内容非常困难（不是不可能，但肯定不切实际）。

但是由于Google文档的CORS政策，您可以使用过去某个时候在SO上其他地方找到的此代码段（已将其保存在代码注释中，对不起，我没有归属）提取内容，然后在iframe之外使用它-换句话说，仅将“ iframe”用作发出请求的方式，然后格式化内容本身。然后，您可以像处理任何其他div一样处理结果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();
        }
    }
    -->

包含嵌入/发布的Google文档的Iframe的自动高度

8 个答案:

简单回答......你不能