17

我有一个带有已发布 Google Doc 的 iframe。该文档的内容可能会发生变化，因此我想根据 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>
4

8 回答 8

5

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

但是，您可以将高度放大很多并隐藏边框，这样 iframe 滚动条就不会出现，并且文档将看起来是您网站的一部分。

于 2013-09-25T16:08:59.560 回答
4

简单的答案......你不能

（对不起）

原因是由于跨域策略（更多，信息）您无法访问iframe子文档，因此确定它height以便iframe相应地调整大小，简单地说

在计算中，同源策略是 Web 应用安全模型中的一个重要概念。该策略允许在源自同一站点的页面上运行的脚本（方案、主机名和端口号的组合）无特定限制地访问彼此的 DOM，但阻止访问不同站点上的 DOM。

资源

[...]

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

资源

如果你不能这样做，你就不能做你想做的事，因为没有办法确定子文档的高度。

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

  1. 与页面的一侧对齐并设置 100% 高度

  2. 放置在具有 100% 高度/宽度的弹出窗口或模式窗口中

  3. 被控制（JS）用父窗口拉伸，也许用固定的bottom

还请记住，由于这是对此类内容的全球限制，因此用户并非完全不习惯看到它，因此尽管它不是理想的设计选择，但不一定会让您网站的访问者感到困惑/惊讶。

于 2014-03-19T10:45:01.433 回答
1

坏消息是跨域策略不会让您以任何方式这样做。 我花了几个小时试图解决问题，其中包括：

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

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

从以下 URL 下载 ZIP 并按照那里编写的简单安装说明进行操作。

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

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

于 2014-03-25T12:09:20.957 回答
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>
于 2014-03-18T13:53:40.530 回答
0

这里的第一个答案对我有用！高度为 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>
于 2016-05-19T04:25:18.490 回答
0

虽然 iframe 中的内容，但它过于困难（不是不可能，但肯定是不切实际的）。

但是由于 Google Docs 的 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();
        }
    }
    -->
于 2019-05-09T18:29:34.103 回答
0

我遇到了同样的问题。这是解决方案你必须设置 body 100% 100% widht height 然后 iframe 显示块，100% width 100%vh 这是最终代码.. sry 我不知道如何放置代码标签 xd

`body style="margin: 0px; padding: 0px; width: 100%; height: 100%;" div style="高度：100%；宽度：100%；显示：块；" 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

于 2018-05-22T12:00:11.677 回答
0

这里已经问过类似的问题：Display full length of document for embed google document

解决方案是通过 CORS 请求<embed>代替<iframe>或使用GET您的文档并将其放在您想要的任何位置。后者还允许您设置/修改内容的样式。

于 2018-12-29T11:25:45.063 回答