iframe自适应

最新推荐文章于 2024-07-31 18:37:50 发布

Dfer.Site

最新推荐文章于 2024-07-31 18:37:50 发布

阅读量711

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/dofun333/article/details/79593494

版权

html 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <link rel="shortcut icon" href="/favicon.ico">
        <script src="jquery-3.2.1.min.js"></script>
        <title></title>
        <style>
            html,
            body {
                margin: 0;
            }
            html { overflow-x: hidden; overflow-y: hidden; } 
        </style>

        <script>
            //将页面大小设置为容器的实际尺寸
            function windowSize() {
                //获取屏幕可见区域的实际大小
                width = $(window).width();
                height = $(window).height();
                console.clear()
                console.log(width + "|" + height);
                //$("body").css({"width":width,"height":height})
                $("iframe").css({
                    "width": width,
                    "height": height
                })

                //设置iframe里的网页的body的高宽
                var iframeBody = $('iframe').contents().find('body');
                //      console.log(iframeBody)
                iframeBody.css({
                    "width": width,
                    "height": height
                })

            }

            //窗体大小发生变化时重置容器的尺寸
            $(window).resize(function() {
                windowSize();
            });



            $(function(){
                windowSize()
            })
        </script>
    </head>

    <body>
        <iframe id="iframepage" scrolling="no" onload="windowSize()" frameborder="0" src="http://39.108.105.54:88"></iframe>

    </body>

</html>