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

问题描述 投票：0回答：9

我有一个带有已发布的 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>
html css iframe google-docs google-drive-realtime-api
9个回答
6
投票

简单的答案...你不能

（对不起）

原因是由于跨域策略（more，info），您无法访问

iframe
子文档，因此确定其
height
以便相应地调整
iframe
的大小，简单地说

在计算领域，同源策略是一个重要的概念 Web 应用程序安全模型。该策略允许脚本运行在 来自同一站点的页面 – 方案的组合， 主机名和端口号 – 无需访问对方的 DOM 特定的限制，但会阻止在不同的平台上访问 DOM 网站。

来源

[...]

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

来源

如果你做不到这一点，你就无法做你想做的事，因为无法确定子文档的高度。

你想这样做的原因似乎与设计有关。因此，您可能需要考虑不同的方法来在您的网站中实现内容（iframe），最明显的一个是对高度的自然限制是浏览器视口高度，因此也许使 

iframe
为视口的 100%（ html、body）高度？虽然如果页面上有其他组件，这会干扰您的设计...但还有其他选择... 
iframe
可以：

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

  2. 放置在高度/宽度为 100% 的弹出窗口或模态窗口中

  3. 受控（JS）与父窗口一起拉伸，也许有一个固定的

    bottom

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

5
投票

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

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

1
投票

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

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

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

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

https://iframe-resizer.com

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

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>
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>
0
投票

我也遇到了同样的问题。这是解决方案 您必须将主体设置为 100% 100% 宽度高度 然后是iframe显示块，100%宽度100%vh 这是最终的代码..抱歉，我不知道如何放置代码标签 xd

`body style="margin: 0px; padding: 0px; width: 100%; height: 100%;" div style="高度：100%；宽度：100%；显示：块；" iframeframeborder=“0”样式=“高度：100vh；宽度：100％；显示：块；”宽度=“100％”高度=“100％”src=“https://docs.google.com/spreadsheets/d/1SizkrPE97j1TouBmohPjCj0ZB-MxYQtRSKotHyxT8Y8/edit#gid=0”/ iframe div

0
投票

这里已提出类似的问题：显示嵌入谷歌文档的文档的完整长度

解决方案是使用 

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

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();
        }
    }
    -->
0
投票

我有一个可行的解决方案，基本上，您必须强制托管页面为 iframe 腾出空间。这是一个拼凑，但在我的uki.BlogSpot.com:

上创建一个 HTML 表格对我来说很有效 
<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.