本文介绍如何使用纯 JavaScript 检测当前页面 URL 路径是否包含特定字符串（如 /home），并据此动态控制表单容器的显示与隐藏，确保表单仅在匹配路径下可见。
本文介绍如何使用纯 javascript 检测当前页面 url 路径是否包含特定字符串（如 `/home`），并据此动态控制表单容器的显示与隐藏，确保表单仅在匹配路径下可见。
在实际开发中，常需根据用户访问的页面路径（URL）动态控制某些 UI 元素的可见性——例如，仅在 /home 或其子路径（如 /home/about）下显示报名表单，而在其他页面（如 /contact、/products）中完全隐藏。这不仅能提升用户体验，还能避免不必要的资源加载和潜在的交互冲突。
✅ 正确实现的关键点
你最初的尝试失败，主要原因在于执行时机与 DOM 加载顺序不匹配：
- 表单容器 <div id="zf_div_..."> 是在 <script> 中动态创建并插入的，而 DOMContentLoaded 事件监听器试图立即查找该元素——但此时元素可能尚未被创建（尤其是当脚本位于页尾且未确保 DOM 就绪时）。
- 更重要的是，你将 display: none 写死在 HTML 的 div 标签内，又在 JS 中尝试用 display = "block" 切换，但若 JS 执行失败（如元素未找到），表单将永远不可见。
✅ 推荐解决方案（结构清晰 + 可靠执行）
以下是一个完整、健壮、可直接集成的实现方案：
1. HTML 结构（保持简洁，不预设 display）
<!-- 将表单容器放在页面合适位置（如页脚） --> <div id="zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk"></div>
2. JavaScript 逻辑（安全、延迟、容错）
// 等待 DOM 完全加载后再执行
document.addEventListener("DOMContentLoaded", function () {
// ✅ 使用更鲁棒的路径匹配：支持 /home 和 /home/xxx
const currentPath = window.location.pathname;
const shouldShowForm = currentPath === "/home" || currentPath.startsWith("/home/");
// ✅ 安全获取容器（防止元素不存在时报错）
const formContainer = document.getElementById("zf_div_Bn5V7dbaKmVw_3o0WHIxFJkMwtnNVN84A3_B5az8QIk");
if (!formContainer) {
console.warn("表单容器未找到，请检查 ID 是否正确");
return;
}
// ✅ 仅在匹配时加载并显示表单（避免无意义的 iframe 创建）
if (shouldShowForm) {
// 创建并注入 iframe
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);
// ✅ 保留原有的 postMessage 高度自适应逻辑（仅在表单加载后生效）
window.addEventListener("message", function (event) {
try {
const data = event.data;
if (typeof data !== "string") return;
const parts = data.split("|");
if (parts.length !== 2) return;
const [perma, heightStr] = parts;
const newHeight = parseInt(heightStr, 10) + 15 + "px";
const iframeEl = formContainer.querySelector("iframe");
if (
iframeEl &&
iframeEl.src.includes("formperma") &&
iframeEl.src.includes(perma)
) {
if (iframeEl.style.height !== newHeight) {
iframeEl.style.height = newHeight;
}
}
} catch (e) {
console.error("处理表单高度消息时出错:", e);
}
}, false);
// ✅ 显式显示容器（此时 iframe 已插入）
formContainer.style.display = "block";
} else {
// 不匹配则隐藏容器（即使内部有 iframe，也不会渲染）
formContainer.style.display = "none";
}
});⚠️ 注意事项与最佳实践
- 路径匹配建议：使用 === "/home" 或 startsWith("/home/") 替代 includes("/home")，避免误匹配（如 /homepage 或 /my-home 也会被触发）。
- 性能优化：不在非目标页面创建 iframe，减少 HTTP 请求与内存占用。
- 可维护性：将表单 ID、URL 片段、iframe 配置等提取为常量，便于后期统一修改。
- 错误防护：始终检查 DOM 元素是否存在，避免 Cannot read property 'appendChild' of null 类型错误。
- 无障碍支持：保留 aria-label，并在隐藏时考虑是否需设置 aria-hidden="true"（若表单对屏幕阅读器无意义）。
✅ 总结
通过将 URL 判断逻辑前置、解耦表单加载与显示时机、增强错误处理，即可实现稳定可靠的条件化表单展示。核心原则是：先判断，再加载；先存在，再操作；先容错，再执行。这一模式同样适用于 Banner、侧边栏、弹窗等需按路由动态控制的 UI 组件。
