Avada（WP主题）标签页iframe高度自适应仅首标签生效问题咨询

问题根因 #

• 所有iframe使用了重复的id="ifrm"，HTML规范中id属性全局唯一，document.getElementById()只会返回匹配到的第一个元素，剩余3个iframe的加载事件根本没有被绑定
• Avada标签页默认将未激活标签的DOM设置为display: none，隐藏状态下iframe的内容高度计算会失效，即便提前绑定了加载事件也无法拿到正确数值

修复步骤 #

第一步：调整iframe嵌入代码 #

每个标签页的iframe使用唯一id，同时添加统一的class用于批量绑定事件，示例：

<!-- 第一个标签页iframe -->
<iframe id="tab1_ifrm" class="tab-iframe" src="https://第一个标签嵌入地址.com"></iframe>
<!-- 第二个标签页iframe -->
<iframe id="tab2_ifrm" class="tab-iframe" src="https://第二个标签嵌入地址.com"></iframe>
<!-- 第三个标签页iframe -->
<iframe id="tab3_ifrm" class="tab-iframe" src="https://第三个标签嵌入地址.com"></iframe>
<!-- 第四个标签页iframe -->
<iframe id="tab4_ifrm" class="tab-iframe" src="https://第四个标签嵌入地址.com"></iframe>

第二步：替换原有JS代码 #

替换</body>闭合标签前的旧JS代码，新代码会同时处理iframe加载、标签页切换两个场景的高度计算：

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(ifrm) {
    if(!ifrm) return;
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px";
    ifrm.style.height = getDocHeight( doc ) + 150 + "px";
    ifrm.style.visibility = 'visible';
}

// 所有iframe加载时自动计算可见状态下的高度
document.querySelectorAll('.tab-iframe').forEach(ifrm => {
    ifrm.onload = function() {
        if(ifrm.offsetParent !== null) {
            setIframeHeight(ifrm);
        }
    }
})

// 监听Avada标签切换事件，切换到对应标签时重新计算当前iframe高度
jQuery(document).on('fusion-tab-click', function(e) {
    var activeIframe = jQuery(e.tabContent).find('.tab-iframe')[0];
    if(activeIframe) {
        if(activeIframe.complete) {
            setIframeHeight(activeIframe);
        } else {
            activeIframe.onload = function() {
                setIframeHeight(activeIframe);
            }
        }
    }
});

注意事项 #

• Avada主题默认加载jQuery，无需额外引入依赖
• 如果iframe嵌入的是跨域地址，需要被嵌入站点配置允许跨域通信的响应头，否则无法读取iframe内容高度，会触发权限报错

内容的提问来源于stack exchange，提问作者Jordi Juanola