iFrame 未扩展到全部内容高度，即使 jQuery 脚本以它为目标

Question

在 header 我有以下 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

您尝试过将 allowfullscreen 添加到 iframe 吗？

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

您可能还需要调整环绕 div 的 CSS。

Answer 2

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

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

否则你做不到。由于针对 cross-site/cross-origin 脚本实施的规则，您无法获得 iframe 中内容的高度。

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

在 iframe 上（在 chrome 中）尝试的任何操作都将导致： jquery.min.js:2 Uncaught DOMException: Failed to read the 'contentDocument' 属性 from 'HTMLIFrameElement': Blocked a frame with origin "http://atlantictutoring.com" from accessing a cross-origin frame .(…)

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

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

Answer 3

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

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

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

Answer 4

处理 iFrame 是一个 20 年的老问题，仍然没有简单的本机选项。

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

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

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

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

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

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

iFrame 未扩展到全部内容高度，即使 jQuery 脚本以它为目标

iFrame not expanding to full content height, even with jQuery script targeting it

javascript

size

iframe

jquery