Iframe 自适应宽高

最新推荐文章于 2024-05-23 09:58:18 发布

@Murphy

最新推荐文章于 2024-05-23 09:58:18 发布

阅读量1.6k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Devil_Song/article/details/126664725

版权

开发中经常遇到IFrame嵌入页面的宽高自适应的问题，经过网上查找，终于找到了完美解决这个问题的
方法。

在父页面中引入 iframeResizer.min.js
并在父页面中写入以下方法

iFrameResize([{log: true}]);

然后在子页面中引入 iframeResizer.contentWindow.min.js
就可以完美解决自适应的问题了！

附：iframeResizer GitHub地址

代码示例：

父页面

<!DOCTYPE html>
<html>
<head>
    <title>Iframe</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=1200"/>
</head>
<style>

</style>
<body>
<div id="app">
    <div @click="switchPage(1)" >son-1</div>
    <div @click="switchPage(2)" >son-2</div>
    <div id="main" class="main">
        <iframe frameborder="0" name="content" :src="contentUrl"></iframe>
        <iframe frameborder="0" name="content" :src="contentUrl"></iframe>
        <iframe frameborder="0" name="content" :src="contentUrl"></iframe>
    </div>
</div>

<script src="jquery.js"></script>
<script src="vue.js"></script>
<script src="iframeResizer.min.js"></script>

<script th:inline="javascript">
    var globalVue = new Vue({
        el: '#app',
        data: function () {
            return {
                contentUrl:"son-1.html",
            };
        },
        created: function () {

        },
        mounted: function () {
            iFrameResize([{log: true}]);
        },
        destroy: function () {

        },
        methods: {
            switchPage:function(type){
                let that = this;
                if (type==1) {
                    that.contentUrl="son-1.html"
                }else{
                    that.contentUrl="son-2.html"
                }
                console.log(that.contentUrl)
            }
        }
    });
</script>
</body>

</html>

子页面1

<!DOCTYPE html>
<html>
<head>
    <title>Iframe</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=1200"/>
</head>
<style>
    .son-1{
        width: 100%;
        height: 800px;
        background: #DDDDDD;
    }
    .add-div{
        width: 100%;
        height: 50px;
        background: #FFFF77;
    }
</style>
<body>
<div id="app">
    <button @click="addElm()">添加</button>
    <div id="son-1" class="son-1">son-1</div>
</div>

<script src="jquery.js"></script>
<script src="vue.js"></script>
<script src="iframeResizer.contentWindow.min.js"></script>

<script>
    var globalVue = new Vue({
        el: '#app',
        data: function () {
            return {
                addHtml:"",
            };
        },
        created: function () {

        },
        mounted: function () {

        },
        destroy: function () {

        },
        methods: {
            addElm:function(){
                let that = this;
                that.addHtml = that.addHtml + "<div class=\"add-div\">添加</div>\n";
                $("#son-1").before(that.addHtml);
            }
        }
    });
</script>
</body>

</html>

子页面2

<!DOCTYPE html>
<html>
<head>
    <title>Iframe</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=1200"/>
</head>
<style>
    .son-2{
        width: 100%;
        height: 1200px;
        background: #FFFF77;
    }
</style>
<body>
<div id="app">
    <div class="son-2">son-2</div>
</div>

<script src="jquery.js"></script>
<script src="vue.js"></script>
<script src="iframeResizer.contentWindow.min.js"></script>

<script>
    var globalVue = new Vue({
        el: '#app',
        data: function () {
            return {
                
            };
        },
        created: function () {

        },
        mounted: function () {

        },
        destroy: function () {

        },
        methods: {

        }
    });
</script>
</body>

</html>