只是想分享我的解决方案和兴奋。我花了整整四天的时间进行深入的研究和失败，但我认为我已经找到了一种使iframe完全响应的简洁方法！耶！
我尝试了很多不同的方法...我不想像postMessage那样使用双向通信隧道，因为它对于同源来说很尴尬，对于跨源来说很复杂（因为没有管理员愿意代表你打开大门并实现它）。
我试过使用MutationObservers，但仍然需要几个EventListeners（resize，click，..）来确保布局的每次更改都得到正确处理。- 如果脚本切换元素的可见性怎么办？或者，如果它按需动态预加载更多内容呢？- 另一个问题是从某处获取iframe内容的准确高度。大多数人建议使用scrollHeight或offsetHeight，或使用Math.max组合使用。问题是，直到iframe元素更改其维度，这些值才会更新。要实现这一点，您可以在抓取scrollHeight之前简单地重置iframe.height = 0，但还有更多的警告。去他的吧
然后，我有了另一个想法，用requestAnimationFrame来实验，以摆脱我的事件和观察者地狱。现在，我可以立即对每个布局更改做出React，但我仍然没有可靠的来源来推断iframe的内容高度。然后我偶然发现了getComputedStyle！这是一种顿悟！一切都很顺利。
好吧，看看我从无数次尝试中最终提炼出来的代码。

function fit() {
    var iframes = document.querySelectorAll("iframe.gh-fit")

    for(var id = 0; id < iframes.length; id++) {
        var win = iframes[id].contentWindow
        var doc = win.document
        var html = doc.documentElement
        var body = doc.body
        var ifrm = iframes[id] // or win.frameElement

        if(body) {
            body.style.overflowX = "scroll" // scrollbar-jitter fix
            body.style.overflowY = "hidden"
        }
        if(html) {
            html.style.overflowX = "scroll" // scrollbar-jitter fix
            html.style.overflowY = "hidden"
            var style = win.getComputedStyle(html)
            ifrm.width = parseInt(style.getPropertyValue("width")) // round value
            ifrm.height = parseInt(style.getPropertyValue("height"))
        }
    }

    requestAnimationFrame(fit)
}

addEventListener("load", requestAnimationFrame.bind(this, fit))

就是这样没错- 在HTML代码中编写<iframe src="page.html" class="gh-fit gh-fullwidth"></iframe>。gh-fit是一个伪CSS类，用于识别DOM中哪些iframe元素应该受到脚本的影响。gh-fullwidth是一个简单的CSS类，只有一个规则width: 100%;。
上面的脚本自动从DOM中获取所有分配了.gh-fit类的iframe。然后，它从document.getComputedStyle(iframe)中获取并使用预先计算的宽度和高度样式值，这些值总是包含该元素的像素完美大小！完美！
注意，这个解决方案不能跨源工作（其他任何解决方案也不能，没有像IFrameResizer这样的双向通信策略）。JS无法访问iframe的DOM，如果它不属于你。
我能想到的唯一其他跨域解决方案是使用https://github.com/gnuns/allorigins这样的代理。但这将涉及到深度复制你提出的每个请求-换句话说，你“窃取”整个页面源代码（使其成为你的并让JS访问DOM），你修补这个源代码中的每个链接/路径，这样它也会通过代理。重新连接的程序是一个坚韧的，但可行的。
我可能会尝试自己在这个跨域的问题，但这是另一天。享受代码！：）

没有CSS唯一的方法来根据其内容设置iframe高度。您需要使用JavaScript获取iframe内容高度，然后设置为iframe高度。
如何使用JavaScript实现这一点，在以下问题中得到了回答和解释：

1. Make iframe automatically adjust height according to the contents without using scrollbar?
2. make iframe height dynamic based on content inside- JQUERY/Javascript
3. Resize iframe to content with Jquery
4. Adjust width height of iframe to fit with content in it
5. cross-domain iframe resizer?

尝试将position设置为fixed，如下所示：

height: 100%;
width: 100%;
position:fixed;

或者像这样：

height: 100vh;
width: 100vw;
position:fixed;

给你的iframe分配一个自定义的id，然后你就可以将它设置为vw或vh。

#myiframe {
    width:77vw;
    height:calc(77vw / 3);
}

<div align="center"><iframe id="myiframe" src="https://g1.ipcamlive.com/player/player.php?alias=64512bbc49030&skin=white&autoplay=1&disableautofullscreen=1&disablevideofit=1" width="900px" height="300px" frameborder="0" allowfullscreen> </iframe></div>