Javascript 如何在没有纵横比假设的情况下使iframe响应？

如何在不假设纵横比的情况下使iframe具有响应性？例如，内容可能具有任何宽度或高度，这在渲染之前是未知的

注意，您可以使用Javascript

例如：

<div id="iframe-container">
    <iframe/>
</div>

调整此

iframe容器的大小，使其内容在没有额外空间的情况下几乎无法放入内部，换句话说，有足够的空间容纳内容，以便无需滚动即可显示，但没有多余的空间。容器完美地包裹了iframe

演示如何使iframe响应，假设内容的纵横比为16:9。但在这个问题中，纵横比是可变的。
我的解决方案是on和

提出了一种无纵横比假设的响应iframe解决方案

目标是在必要时调整iframe的大小，换句话说，在调整窗口大小时。这是通过JavaScript执行的，以获得新的窗口大小，并因此调整iframe的大小

注意：不要忘记在页面加载后调用resize函数，因为页面加载后窗口本身不会调整大小

代码

index.html


响应式Iframe
响应式iframe

提供一种无方面的响应iframe解决方案
比率假设。




style.css

html{
身高：100%；
最大高度：1000px；
}
身体{
背景色：#44474a；
颜色：白色；
保证金：0；
填充：0；
}
#视频包装器{
位置：相对位置；
填充顶部：25px；
填充底部：100px；
身高：0；
保证金：10；
}
#iframe{
排名：0；
左：0；
宽度：100%；
身高：100%；
}

main.js

我花了一些时间在这上面。我希望你会喜欢它

编辑
这可能是最好的通用解决方案。但是，当制作得非常小时，iframe的尺寸不合适。这是特定于您正在使用的iframe的。除非您有iframe的代码，否则无法为这种现象编写正确的答案，因为您的代码无法知道iframe更喜欢哪种大小来正确显示

只有像@Christos Lytras所展示的一些黑客才能成功，但它永远不会适用于每个iframe。仅在特定情况下。
不可能使用Javascript与不同来源的iFrame交互以获得其大小；唯一的方法是将
targetOrigin
设置为您的域，或者使用iFrame source中的wildchar
*
。您可以代理不同来源网站的内容并使用
srcdoc
，但这被认为是一种黑客行为，它不能用于SPA和许多其他更具动态性的页面

相同原点iFrame大小
假设我们有两个相同的原点iFrame，其中一个高度较短，宽度固定：


html，正文{margin:0}
身体{
宽度：300px；
}
这是一个iFrame
（瓦尔）

和长高度iFrame：


html，正文{margin:0}
#扩展器{
高度：1200px；
}
这是一个长高度的iFrame起点
（瓦尔）
这是一个长高度iFrame端
（瓦尔）

我们可以使用
iFrame.contentWindow.document
在
load
事件上获取iFrame大小，我们将使用以下命令发送到父窗口：


函数iframeLoad（）{
window.top.postMessage({
iframeWidth:this.contentWindow.document.body.scrollWidth，
iframeHeight:this.contentWindow.document.body.scrollHeight，
参数：{
id:this.getAttribute（'id'）
}
});
}
window.addEventListener（'message'({
数据：{
如果帧宽度，
如果是高度，
参数：{
身份证件
} = {}
}
}) => {
//我们添加了6个像素，因为所有iFrame都有“边框宽度：3px”
if（iframeWidth）{
document.getElementById（id）.style.width=`${iframeWidth+6}px`；
}
if（iframeHeight）{
document.getElementById（id）.style.height=`${iframeHeight+6}px`；
}
}，假）；
document.getElementById（'iframe-local'）。addEventListener（'load'，iframeLoad）；
document.getElementById（'iframe-long'）。addEventListener（'load'，iframeLoad）；

我们将获得两个iFrame的适当宽度和高度；你可以在线查看并查看屏幕截图

不同来源iFrame大小破解（不推荐）
这里描述的方法是一种黑客攻击，如果绝对必要，并且没有其他方法，应该使用它对于大多数动态生成的页面和SPA，它将不起作用。该方法使用代理获取页面HTML源代码以绕过CORS策略（这是创建简单CORS代理服务器的一种简单方法，并且它有一个在线演示
https://cors-anywhere.herokuapp.com
）然后将JS代码注入到HTML中，以使用
postMessage
，并将iFrame的大小发送到父文档。它甚至处理iFrame
resize
（与iFrame
width:100%
）事件，并将iFrame大小发回父对象

patchIframeHtml
：
一个用于修补iFrame HTML代码并注入自定义Javascript的函数，该函数将使用
postMessage
在
load
和
resize
上向父级发送iFrame大小。如果
origin
参数有一个值，那么将使用该origin URL向头部添加一个HTML
元素，这样，像
/some/resource/file.ext这样的HTML URI将由iFrame内的origin URL正确获取

函数patchIframeHtml（html，origin，params={}）{
//创建DOM解析器
const parser=new DOMParser（）；
//创建一个将HTML解析为“text/HTML”的文档
const doc=parser.parseFromString（html，'text/html'）；
//创建将被注入iFrame的脚本元素
常量脚本=doc.createElement（'script'）；
//设置脚本代码
斯克里
let videoWrapper = document.getElementById("video_wrapper");

let w;
let h;
let bodyWidth;
let bodyHeight;

// get window size and resize the iframe
function resizeIframeWrapper() {
    w = window.innerWidth;
    h = window.innerHeight;

    videoWrapper.style["width"] = `${w}px`;
    videoWrapper.style["height"] = `${h - 200}px`;
}

// call the resize function when windows is resized and after load
window.onload = resizeIframeWrapper;
window.onresize = resizeIframeWrapper;

.iframe-container{
     width:100%;
     min-height:600px;
     max-height:100vh;
}

.iframe-container iframe{
     width:100%;
     height:100%;
     object-fit:contain;
}