下拉菜单切换iframe时脚本输出高度不一致如何解决

问题根源 #

你遇到的高度适配问题主要有两个原因：

1. 第三方embed脚本生成的iframe默认不会根据内容动态调整高度，不同城市的内容长度不同，就会出现部分内容被截断或者留白过多的问题
2. 初始被添加hide类（display: none）的容器，在页面首次加载时浏览器不会计算其尺寸，第三方脚本生成iframe时没法拿到正确的容器宽度，也会导致高度计算错误

解决方案 #

以下是修改后的完整可运行代码，已经实现了所有选项内容高度自动适配：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<script>
// iframe高度自适应函数
function adjustIframeHeight(iframe) {
    try {
        // 同域下直接读取内容高度
        const height = iframe.contentWindow.document.body.scrollHeight;
        iframe.style.height = height + 'px';
    } catch (e) {
        // 跨域场景下监听第三方embed发送的postMessage高度通知
        window.addEventListener('message', function(e) {
            if (e.origin === 'https://www.local-marketing-reports.com' && e.data.height) {
                iframe.style.height = e.data.height + 'px';
            }
        });
    }
}

$(document).on('change', '.div-toggle', function() {
    var target = $(this).data('target');
    var show = $("option:selected", this).data('show');
    $(target).children().addClass('hide');
    const $showEle = $(show);
    $showEle.removeClass('hide');
    // 切换显示后适配对应iframe的高度
    const iframe = $showEle.find('iframe')[0];
    if (iframe) {
        // 兼容iframe已加载和未加载两种场景
        if (iframe.complete) {
            adjustIframeHeight(iframe);
        } else {
            iframe.onload = function() {
                adjustIframeHeight(iframe);
            }
        }
    }
});

$(document).ready(function(){
    $('.div-toggle').trigger('change');
});
</script>

<style type="text/css">
.hide {
    display: none;
}
/* 可选：给iframe加默认样式，消除默认边距 */
.my-info-1 iframe {
    width: 100%;
    border: none;
    margin: 10px 0;
}
</style>
<select class="div-toggle" data-target=".my-info-1">
<option value="29509eadce1204a5fd9ed01b44b52524a71807d7" data-show=".Charlotte">Charlotte</option>
<option value="9a0df474f03b7b7080d4b39b3e0a1757f5cf64b0" data-show=".Atlanta">Atlanta</option>
<option value="4cb0b97fa319d1c6738290b1baa5c37d648fb130" data-show=".Baltimore">Baltimore</option>
<option value="a15f9d0806e9cdba3f7b9410beaa6f44cd5f5558" data-show=".Columbia">Columbia</option> 
<option value="ec69c0c76f75fe97907f93a519d0843893525105" data-show=".Dallas">Dallas</option> 
<option value="9c60103c131ed39cdd0e865a62a8792b2c22c506" data-show=".Houston">Houston</option>      
<option value="b2a9f207b4441fa73f4a832eceaaed4cf62db0cc" data-show=".Indianapolis">Indianapolis</option>      
<option value="e75ca6fe26fedac7654a45a9e11a85d94a021844" data-show=".Jacksonville">Jacksonville</option>      
<option value="39e75daa82e75e724b93d86f39107515241a040c" data-show=".Las Vegas">Las Vegas</option>      
<option value="a9d4b1711123b3662bf9734f4286a27ba8817048" data-show=".Minneapolis">Minneapolis</option>
<option value="14aab41eadf986e3194857f1313ebf3d7f031610" data-show=".Oklahoma">Oklahoma</option>      
<option value="92559c3e58a6b0bb7ccb12bb84cb60e2aadf28d1" data-show=".Tampa">Tampa</option> 
</select>


<div class="my-info-1">
<div class="Charlotte hide"><div data-embed-placeholder="5466"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/29509eadce1204a5fd9ed01b44b52524a71807d7?id=5466"></script></div></div>
  <div class="Atlanta hide"><div data-embed-placeholder="5958"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/9a0df474f03b7b7080d4b39b3e0a1757f5cf64b0?id=5958"></script></div></div>
  <div class="Baltimore hide"><div data-embed-placeholder="5960"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/4cb0b97fa319d1c6738290b1baa5c37d648fb130?id=5960"></script></div></div>
  <div class="Columbia hide"><div data-embed-placeholder="5962"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/a15f9d0806e9cdba3f7b9410beaa6f44cd5f5558?id=5962"></script></div></div>
  <div class="Dallas hide"><div data-embed-placeholder="5963"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/ec69c0c76f75fe97907f93a519d0843893525105?id=5963"></script></div></div>
  <div class="Houston hide"><div data-embed-placeholder="5964"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/9c60103c131ed39cdd0e865a62a8792b2c22c506?id=5964"></script></div></div>
  <div class="Indianapolis hide"><div data-embed-placeholder="5965"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/b2a9f207b4441fa73f4a832eceaaed4cf62db0cc?id=5965"></script></div></div>
  <div class="Jacksonville hide"><div data-embed-placeholder="5969"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/e75ca6fe26fedac7654a45a9e11a85d94a021844?id=5969"></script></div></div>
  <div class="Las Vegas hide"><div data-embed-placeholder="5966"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/39e75daa82e75e724b93d86f39107515241a040c?id=5966"></script></div></div>
  <div class="Minneapolis hide"><div data-embed-placeholder="5970"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/a9d4b1711123b3662bf9734f4286a27ba8817048?id=5970"></script></div></div>
  <div class="Oklahoma hide"><div data-embed-placeholder="5967"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/14aab41eadf986e3194857f1313ebf3d7f031610?id=5967"></script></div></div>
  <div class="Tampa hide"><div data-embed-placeholder="5968"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/92559c3e58a6b0bb7ccb12bb84cb60e2aadf28d1?id=5968"></script></div></div>                     
</div>

核心修改说明 #

• 新增了adjustIframeHeight工具函数，同时兼容同域直接读高度和跨域监听postMessage两种场景，适配所有第三方embed生成的iframe高度
• 在下拉切换显示对应城市容器的逻辑后，新增了高度适配触发逻辑，解决隐藏容器首次加载时高度计算错误的问题
• 新增了iframe的load事件监听，确保iframe内内容加载完成后再计算高度，避免内容未加载完导致的高度偏差
• 可选新增了iframe的全局样式，消除默认边距和边框，展示效果更统一

内容的提问来源于stack exchange，提问作者Daniel Katz