项目上有个需求，html页面展示多个视频，视频的提供方式是一个html页面，需要将视频页面使用iframe的方式嵌入到展示页面。
html视频页面（video.html），内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.1" />
<title>视频播放页面</title>
<style>
*,body,html{
margin: 0;
padding: 0;
overflow: hidden;
line-height: 0px;
}
body{
background-color: rgb(248, 244, 244);
}
</style>
</head>
<body>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>html展示页面，嵌入video.html，且div宽高自适应，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe自动匹配高度</title>
<style>
*,body,html{
margin: 0;
padding: 0;
overflow: hidden;
}
body{
background-color: brown;
}
iframe{
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
/** 水平居中**/
margin: 0 auto;
}
</style>
<script>
function autoIframeHeight() {
let iframe = document.getElementById('myIframe');
let width = 0;
let height = 0;
try {
let bWidth = iframe.contentWindow.document.body.scrollWidth;
let bHeight = iframe.contentWindow.document.body.scrollHeight;
let dWidth = iframe.contentWindow.document.documentElement.scrollWidth;
let dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
width = Math.max(bWidth, dWidth);
height = Math.max(bHeight, dHeight);
} catch (ex) {
// cross-domain iframe security error
}
iframe.style.width = width + 'px';
iframe.style.height = height + 'px';
console.log("iframe的宽度：",iframe.style.width);
console.log("iframe的高度：",iframe.style.height);
var container = document.getElementById('container');
container.style.width = width + "px";
container.style.height = height + 'px';
console.log("div的宽度：",container.style.width);
console.log("div的高度：",container.style.height);
}
</script>
</head>
<body>
<div class="container" id="container">
<iframe id="myIframe" style="border: none;" scrolling="no"
src="video.html"
onload="autoIframeHeight()">
</iframe>
</div>
</body>
</html>跨域嵌套自适应宽高，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe自动匹配高度</title>
<style>
*,body,html{
margin: 0;
padding: 0;
overflow: hidden;
}
body{
background-color: brown;
}
iframe{
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
/** 水平居中**/
margin: 0 auto;
}
</style>
<script>
function autoIframeHeight() {
var iframe = document.getElementById('myIframe');
var container = document.getElementById('container');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var outerDoc = iframe.ownerDocument || document;
var innerWidth = innerDoc.body.scrollWidth;
var innerHeight = innerDoc.body.scrollHeight;
var outerWidth = outerDoc.defaultView.innerWidth;
var outerHeight = outerDoc.defaultView.innerHeight;
iframe.style.width = innerWidth + 'px';
iframe.style.height = innerHeight + 'px';
console.log("iframe的宽度：",iframe.style.width);
console.log("iframe的高度：",iframe.style.height);
container.style.width = innerWidth + 'px';
container.style.height = innerHeight + 'px';
console.log("div的宽度：",container.style.width);
console.log("div的高度：",container.style.height);
}
</script>
</head>
<body>
<div class="container" id="container">
<iframe id="myIframe" style="border: none;" scrolling="no"
src="video.html"
onload="autoIframeHeight()">
</iframe>
</div>
</body>
</html>