iFrame 没有扩展到完整的内容高度，即使 jQuery 脚本针对它

Question

这里是iFrame in question。

在标题中我有以下 jQuery 代码：

<script>

    $(function(){

        var iFrames = $('iframe');

        function iResize() {

            for (var i = 0, j = iFrames.length; i < j; i++) {
              iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) {

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() {
                   this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
               });
            }

        });

</script>

嵌入看起来像这样：

 <div id="appointy">

<iframe src="//hfxtutoring.appointy.com/?isGadget=1" class="iframe" scrolling="no" frameborder="0" allowtransparency="true" style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;">
</iframe>

</div>

CSS 是这样的：

/*  to ensure proper scrolling and overflow handling on mobile devices, put this styling in a div wrapper around the iframe because it's unreliable in css:   -webkit-overflow-scrolling: touch; overflow: auto; */

.iframe 
{
    border: none;
    width: 100%;
    margin-right: 10px;
    padding: 0;
    border: 1px
 }

我想要的是 iFrame 根据内容高度调整大小，而不是设置高度。我不完全明白如何让它像this example 一样工作。

Answer 1

你可以试试 CSS。 Here is my codepen.

iframe {
  height: calc(100vh - 20px);
  width: calc(100vw - 40px);
}

我添加了 calc 函数，以便让您了解如何进一步动态控制高度/宽度的大小。

Answer 2

你不能这样做，它会破坏互联网。如果您可以更改或编辑 iframe 的内容，您可能会在指定站点上造成巨大的混乱。有充分的理由阻止这种事情。可悲的是，“更改或编辑”还意味着对 iframe 的内容进行任何操作，包括仅针对它进行查询。

如果您可以在指定站点和您的服务器上启用 CORS，这将是小菜一碟。这将让您运行一个脚本来获取可滚动 div 的高度，然后您可以简单地从那里设置 iframe 的高度。

否则你不能这样做。由于针对跨站点/跨域脚本实施的规则，您无法获得 iframe 中内容的高度。

var y = $("iframe")
y.contents()

对 iframe（在 chrome 中）尝试的任何操作都将导致： jquery.min.js:2 Uncaught DOMException: 无法从 'HTMLIFrameElement' 中读取 'contentDocument' 属性: 阻止具有源 "http://atlantictutoring.com" 的框架访问跨域框架。(...)

如果您的应用是指定的子域，那么您也可以这样做，但是设置了一些规则来防止您欺骗其他域。 ：/

还使用 Chrome 的开发控制台手动调整指定 url 处的 css 显示滚动条是一个 JS 滚动条，所以那里还有一大堆东西要处理。

Answer 3

您是否尝试将allowfullscreen 添加到 iframe？

<iframe src="{URL}" {other params}  allowfullscreen></iframe>

您可能还需要调整包装 div 的 CSS。

Answer 4

处理 iFrame 是一个 20 年前的问题，仍然没有一个简单的原生选项。

查看您的代码，未调用 iResize() 函数。它也只会在页面加载时调整 iFrame 的大小，您还需要检测内容是否发生变化，或者窗口是否调整大小等，它们是大约 20 个可能导致内容改变大小的不同事件。

我还要指出，使用 offsetHeight 不会包括 body 标签的高度和边距。

我编写了一个库来处理 iFrame 存在的大多数问题，并且它在保持 iFrame 大小适合您的内容方面做得不错。如果您能够将 JS 添加到 iFrame，它甚至可以与 3rd 方站点跨域工作。

您可能会发现它有助于解决此问题以及 iFrame 会给您带来的其他问题。

https://github.com/davidjbradshaw/iframe-resizer

如果您无权将 JS 添加到 iFrame，则无法在浏览器中执行此操作，因为安全保护功能会阻止您干扰远程站点。如果您想了解我的项目如何解决这个问题，请查看 postMessage API。