根据URL控制iframe表单显示异常：含/home路径仍不显示求助

我是JavaScript新手，目前要实现通过JS加载一个iframe表单，需求是仅当URL路径包含/home时显示该表单，其余页面隐藏。我修改代码将表单容器默认设为display:none，并添加DOMContentLoaded事件判断URL，但即使在包含/home的页面，表单也完全不显示。以下是原始表单代码及修改后的代码，恳请提供解决建议。

原始表单代码 #

<div id="zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk"></div>
<script type="text/javascript">(function() {
try{
var f = document.createElement("iframe");
f.src = 'https://forms.heart-life-empowered.com/heartlifeempowered/form/Testcourse1/formperma/Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk?zf_rszfm=1';
f.style.border="none";
f.style.height="2523px";
f.style.width="90%";
f.style.transition="all 0.5s ease";
f.setAttribute("aria-label", 'Test course');

var d = document.getElementById("zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk");
d.appendChild(f);
window.addEventListener('message', function (){
var evntData = event.data;
if( evntData && evntData.constructor == String ){
var zf_ifrm_data = evntData.split("|");
if ( zf_ifrm_data.length == 2 ) {
var zf_perma = zf_ifrm_data[0];
var zf_ifrm_ht_nw = ( parseInt(zf_ifrm_data[1], 10) + 15 ) + "px";
var iframe = document.getElementById("zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk").getElementsByTagName("iframe")[0];
if ( (iframe.src).indexOf('formperma') > 0 && (iframe.src).indexOf(zf_perma) > 0 ) {
var prevIframeHeight = iframe.style.height;
if ( prevIframeHeight != zf_ifrm_ht_nw ) {
iframe.style.height = zf_ifrm_ht_nw;
}
}
}
}
}, false);
}catch(e){}
})();</script>

修改后的代码 #

<div id="zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk" style="display: none;"></div>
<script type="text/javascript">(function() {
try{
var f = document.createElement("iframe");
f.src = 'https://forms.heart-life-empowered.com/heartlifeempowered/form/Testcourse1/formperma/Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk?zf_rszfm=1';
f.style.border="none";
f.style.height="2523px";
f.style.width="100%";
f.style.transition="all 0.5s ease";
f.setAttribute("aria-label", 'Test course');

var d = document.getElementById("zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk");
d.appendChild(f);
window.addEventListener('message', function (){
var evntData = event.data;
if( evntData && evntData.constructor == String ){
var zf_ifrm_data = evntData.split("|");
if ( zf_ifrm_data.length == 2 ) {
var zf_perma = zf_ifrm_data[0];
var zf_ifrm_ht_nw = ( parseInt(zf_ifrm_data[1], 10) + 15 ) + "px";
var iframe = document.getElementById("zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk").getElementsByTagName("iframe")[0];
if ( (iframe.src).indexOf('formperma') > 0 && (iframe.src).indexOf(zf_perma) > 0 ) {
var prevIframeHeight = iframe.style.height;
if ( prevIframeHeight != zf_ifrm_ht_nw ) {
iframe.style.height = zf_ifrm_ht_nw;
}
}
}
}
}, false);
}catch(e){}
})();
document.addEventListener("DOMContentLoaded", function () {
    // Check if the URL contains the specific expression
    var urlContainsExpression = window.location.pathname.includes("/home");

    // Get the form container element
    var formContainer = document.getElementById("zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk");

    // Show or hide the form based on the URL condition
    if (urlContainsExpression) {
        formContainer.style.display = "block";
    } else {
        formContainer.style.display = "none";
    }
});</script>

问题根源分析 #

1. 路径判断的局限性：window.location.pathname.includes("/home")对大小写敏感，若实际路径是/Home或/HOME会判断失败；同时如果路径是/homepage这类包含home的字符串也会误判，需根据实际需求调整匹配规则。
2. 资源加载冗余：原代码不管页面是否符合条件，都会先创建并加载iframe，既浪费网络资源，也可能在隐藏状态下出现加载异常。
3. 事件参数缺失：原message事件处理函数未声明event参数，在严格模式下会导致event未定义错误，影响iframe高度调整逻辑，甚至中断代码执行。

优化修复后的代码 #

<div id="zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk" style="display: none;"></div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
    // 可根据需求调整路径判断逻辑：
    // 示例1：精确匹配路径为/home
    // const isHomePage = window.location.pathname === "/home";
    // 示例2：路径包含/home（不区分大小写）
    const isHomePage = window.location.pathname.toLowerCase().includes("/home");
    
    const formContainer = document.getElementById("zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk");

    if (isHomePage) {
        // 仅在符合条件的页面创建并加载iframe
        try {
            const iframe = document.createElement("iframe");
            iframe.src = 'https://forms.heart-life-empowered.com/heartlifeempowered/form/Testcourse1/formperma/Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk?zf_rszfm=1';
            iframe.style.border = "none";
            iframe.style.height = "2523px";
            iframe.style.width = "100%";
            iframe.style.transition = "all 0.5s ease";
            iframe.setAttribute("aria-label", 'Test course');

            formContainer.appendChild(iframe);

            // 修复message事件参数问题，优化逻辑
            window.addEventListener('message', function (event) {
                const evntData = event.data;
                if (typeof evntData === 'string') {
                    const zf_ifrm_data = evntData.split("|");
                    if (zf_ifrm_data.length === 2) {
                        const zf_perma = zf_ifrm_data[0];
                        const zf_ifrm_ht_nw = (parseInt(zf_ifrm_data[1], 10) + 15) + "px";
                        if (iframe.src.includes('formperma') && iframe.src.includes(zf_perma)) {
                            if (iframe.style.height !== zf_ifrm_ht_nw) {
                                iframe.style.height = zf_ifrm_ht_nw;
                            }
                        }
                    }
                }
            }, false);

            // 显示表单容器
            formContainer.style.display = "block";
        } catch (e) {
            console.error("表单加载失败:", e);
        }
    } else {
        // 非目标页面保持隐藏
        formContainer.style.display = "none";
    }
});
</script>

关键修改说明 #

• 按需加载iframe：先判断路径，仅在符合条件时才创建iframe，减少不必要的网络请求和DOM操作。
• 优化路径判断：增加toLowerCase()实现大小写不敏感匹配，同时提供精确匹配的示例，可根据实际需求调整。
• 修复事件参数：在message事件处理函数中声明event参数，避免未定义错误。
• 简化代码逻辑：复用DOM元素引用，简化类型判断，提升代码可读性和性能。
• 增加错误日志：捕获加载异常并输出日志，方便排查问题。

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