iframe 高度自适应（postMessage）

最新推荐文章于 2023-08-25 14:20:29 发布

每天进步一点.

最新推荐文章于 2023-08-25 14:20:29 发布

阅读量387

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45152848/article/details/103162332

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

网页嵌套iframe（这里假设iframe中我们能加部分代码）
如果不能加，就不要再看往下看了

核心思路

MutationObserver 监听页面高度变化
postMessage 实时通知父页面

子页面 index.html（iframe网页）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box">
    </div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    var $tar = document.getElementById('box');
    var MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;
    var recordHeight = 0;
    var mutationObserver = new MutationObserver(function (mutations) {
        let height = window.getComputedStyle($tar).getPropertyValue('height');
        if (height === recordHeight) {
            return;
        }
        recordHeight = parseFloat(height) + 50;
        if(top != self){
            top.postMessage('{"key":"serviceHeight","value":'+ recordHeight +'}', '*');
        }                
    })
    mutationObserver.observe($tar, {
        childList: true, // 子节点的变动（新增、删除或者更改）
        attributes: true, // 属性的变动
        characterData: true, // 节点内容或节点文本的变动
        subtree: true // 是否将观察器应用于该节点的所有后代节点
    })
    // 此处由于是高度变化，第一次初始化的时候不会出触发观察者的高度变化，不会发送message
    // 所以此处加入一个空的div来触发高度变化
    $('#box').append($('<div style="height: 0px;"></div>'));
</script>
</html>

父页面 index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <iframe src="./index.html" width="100%" height="500px" frameborder="0"></iframe>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    window.addEventListener("message", function(event){
        var data = JSON.parse(event.data);
        var height = data.value;
        $('iframe').css({
            height: height + 'px'
        });
    }, false);
    </script>
</body>
</html>

问题：

父页面查看时会有子页面滚动条闪动效果

原因：

子页面如果在某个时间改变了高度，比如查询了列表撑开了网页
此时通知父页面改变高度，由于非同步通讯，有异步延时，造成闪动效果

解决：
子页面在通知父页面时，html,body 加上 overflow:hidden 去除滚动条
父页面在接收到通知后，反向通知子页面加载完成，子页面收到通知后去除 overflow:hidden

var $tar = document.getElementById('box');
var MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;
var recordHeight = 0;
var mutationObserver = new MutationObserver(function (mutations) {
	···
    if(top != self){
    	// 子页面发送消息前去除滚动条
        $('html,body').css({overflow: 'hidden'});
        top.postMessage('{"key":"serviceHeight","value":'+ recordHeight +'}', '*');
    }
})
// 子页面收到消息后，显示滚动条
window.addEventListener('message', function(event){
    if(event.data == "parentLoaded"){
        $('html,body').css({overflow: 'hidden'});
    }
})

// 父页面接收到之后 向子页面发送 loaded 加载完成消息通知
window.addEventListener("message", function(event){
 var data = JSON.parse(event.data);
    var height = data.value;
    $('iframe').css({
        height: height + 'px'
    });
    var source = event.source;
    source.postMessage('parentLoaded', '*');
}, false);

每天进步一点.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iframe 高度自适应（postMessage）

网页嵌套iframe（这里假设iframe中我们能加部分代码）如果不能加，就不要再看往下看了核心思路MutationObserver 监听页面高度变化postMessage 实时通知父页面子页面 index.html（iframe网页）<!DOCTYPE html><html lang="en"><head> <meta c...
复制链接

扫一扫

专栏目录