网站首页 > 知识剖析正文

html页面嵌套iframe 嵌套iframe自适应宽高跨域嵌套自适应宽高

nixiaole 2024-11-27 18:37:46 知识剖析 16 ℃

项目上有个需求，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>

上一篇：直播背后的原理是?初识视频流协议 HLS 和 RTMP
下一篇：你可能还不知道到的几个HTML属性

网站首页 > 知识剖析 正文

html页面嵌套iframe 嵌套iframe自适应宽高 跨域嵌套自适应宽高

猜你喜欢

网站首页 > 知识剖析正文

html页面嵌套iframe 嵌套iframe自适应宽高跨域嵌套自适应宽高