点击class为funnel_button的链接未触发iframe弹窗问题求助

我希望点击class为funnel_button的<a>链接时显示iframe弹窗，但点击后毫无反应，更新JS脚本后仍无法正常弹出，求排查原因。

原始代码 #

JavaScript #

function showPopup() {
  var popup = document.getElementById("popup");
  popup.style.display = "block";
}

var link = document.querySelector('.funnel_button');
link.addEventListener('click', function(event) {
  event.preventDefault(); // Prevents the default link behavior
  showPopup();
});

CSS #

#popup {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}

HTML #

<ul>
  <li>
    <a class="funnel_button" href="#" onclick="showPopup()">Photos</a>
  </li>
</ul>
<iframe src="#" style="display:none;width:100%;height:100%;border:none;border-radius:4px" id="popup" data-layout="{'id':'POPUP'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate"
  data-deactivation-value="" data-form-name="NAME" data-height="423" data-layout-iframe-id="popup-" data-form-id="13D" title="NAME">
</iframe>

问题原因分析 #

1. DOM加载时机问题：如果JS代码在DOM元素渲染前执行（比如放在<head>标签中），document.querySelector('.funnel_button')会返回null，此时调用link.addEventListener会直接报错，导致后续逻辑无法执行，弹窗自然无法触发。
2. 事件绑定冗余：<a>标签同时使用了onclick属性和JS事件监听，虽然不会直接导致失效，但可能引发潜在的执行冲突，也不利于代码维护。
3. 样式管理混乱：iframe同时通过行内样式style="display:none"和CSS ID选择器设置隐藏状态，虽然JS修改行内样式能覆盖，但这种混合写法容易导致样式优先级混淆。

修复方案及修改后代码 #

核心修改点 #

• 确保JS代码在DOM完全加载后执行；
• 移除冗余的onclick属性，统一使用事件监听；
• 统一用CSS控制iframe初始隐藏状态，移除行内样式；
• 增加元素存在性判断，避免报错。

修改后的JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  function showPopup() {
    const popup = document.getElementById("popup");
    popup.style.display = "block";
  }

  const link = document.querySelector('.funnel_button');
  if (link) {
    link.addEventListener('click', function(event) {
      event.preventDefault();
      showPopup();
    });
  }
});

修改后的HTML #

<ul>
  <li>
    <a class="funnel_button" href="#">Photos</a>
  </li>
</ul>
<iframe src="#" id="popup" data-layout="{'id':'POPUP'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate"
  data-deactivation-value="" data-form-name="NAME" data-height="423" data-layout-iframe-id="popup-" data-form-id="13D" title="NAME">
</iframe>

CSS（保持不变） #

#popup {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}

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