要实现不同源的自动iframe高度,可以使用以下解决方法:
在iframe页面中添加以下代码:
// 获取iframe的高度
function getHeight() {
var height = document.body.scrollHeight;
// 向父窗口发送消息
parent.postMessage(height, '*');
}
// 监听窗口大小变化事件
window.addEventListener('resize', getHeight);
// 初始化时获取一次高度
getHeight();
在父窗口中添加以下代码:
// 监听message事件
window.addEventListener('message', function(event) {
// 判断消息来源是否为iframe页面
if (event.source !== iframe.contentWindow) {
return;
}
// 设置iframe的高度
iframe.style.height = event.data + 'px';
});
在父窗口中添加以下代码:
// 创建Intersection Observer实例
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
// 判断是否进入视窗
if (entry.isIntersecting) {
// 设置iframe的高度为内容的实际高度
entry.target.style.height = entry.target.contentWindow.document.body.scrollHeight + 'px';
}
});
});
// 监听iframe加载完成事件
iframe.addEventListener('load', function() {
// 开始观察iframe元素
observer.observe(iframe);
});
以上两种解决方法可以克服不同源的限制,实现自动调整iframe的高度。
下一篇:不同员工连续天数的分组