网页嵌套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);