Question

我在这里尝试了所有解决方案，但没有一个对我有用。我想让iframe像下面的代码。但我需要根据iframe内容高度动态设置.iframe-container类的高度。我尝试了所有关于stackoverflow的解决方案，但没有一个起作用。

<style>
.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  height: 2000px;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   margin-top:-120px; 
}
</style>

  <div id="frameid" class="iframe-container" >
    <iframe  src="https://idt-spa.kayako.com/it/" frameborder="0"         
scrolling="no" ></iframe>
   </div>
<script>
    window.onload = function () {
    setIframeHeight(document.getElementById('frameid'));
};    
 function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow ||     
iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height =     
iframeWin.document.documentElement.scrollHeight || 
iframeWin.document.body.scrollHeight;
    }
}
};
</script>

Answer 1

我有一个类似的代码可以工作，并且我会延迟调用大小调整功能（因为在触发主要onload事件后会加载帧）

<body onload="window.setTimeout(setIframeHeight, 250)">

在尝试使其正常工作时，我遇到了很多问题，其中之一是设置iframe高度经常会引发错误，因此我捕获到异常并使用样式将高度设置为预定义的值：

iframe.style.height = "750px"

下面是相关代码，实际上我们有两个框架（frmImage和frmAction），如果可能的话，我们会尝试匹配它们，但是您应该明白这一点。

<script type="text/javascript">
    function resizeFrame() {
        try {
            var f = document.getElementById('frmAction');
            var i = document.getElementById('frmImage');
            var h = f.contentWindow.document.body.scrollHeight;
            if (h < i.contentWindow.document.body.scrollHeight)
                h = i.contentWindow.document.body.scrollHeight;

            if ((h < 750) && (s.substring(s.length - 3, 3) == "pdf"))
                h = 750;

            if (f.style.height != h + "px")
                f.style.height = h + "px";

            if (i.style.height != h + "px")
                i.style.height = h + "px";
        }
        catch (err) {
            try {
                i.style.height = "750px"; f.style.height = "750px";
            }
            catch (err1) { }
        }
        window.setTimeout(resizeFrame, 250);
    }
</script>
</head>
    <body style="background-color: white" onload="window.setTimeout(resizeFrame, 250)">

Answer 2

您可以这样设置position:fixed;：

iframe {
        position:fixed;
        border: none;
        height: 100vh;
        width: 100vw;
    }

    <iframe id="frmid" src="https://idt-spa.kayako.com/it/"></iframe>

根据每次加载的内容设置iframe高度

2 个答案: