嵌入iframe的Show按钮首次点击后事件失效问题排查

问题根源 #

核心问题出在弹窗关闭后未恢复显示状态：

• 首次点击Show按钮时，父页面的popup元素默认处于可见状态，插入内容后正常显示。
• 点击关闭按钮时，你设置了popup.style.display = "none"将其隐藏，同时清空了内容。
• 再次调用showPopup时，仅重新插入了HTML内容，但没有把popup的display属性改回可见状态——内容其实已经被插入了，只是元素还处于隐藏状态，所以看起来按钮“失效”。

修复方案 #

在父页面的showPopup函数中，添加一行代码恢复popup的可见性：

<div>
      <iframe id="channelFrame" scrolling="no" style="width: 100%; border: 1px; overflow: hidden" src="child.html"></iframe>
 </div>

 <div id="popup"></div>

 <script>
       function showPopup(info) {
              var popup = document.getElementById("popup");
              // 恢复弹窗可见状态
              popup.style.display = "block";
              popup.innerHTML = info;
              var closeMe = document.getElementById("closeMe");
              if (closeMe) {
                     closeMe.onclick = function() {
                              popup.style.display = "none";
                              popup.innerHTML = "";
                      }
               }
        }
  </script>

额外优化建议 #

• 避免使用onclick绑定事件，推荐用addEventListener，防止多次绑定导致的逻辑冲突：

  closeMe.addEventListener('click', function() {
      popup.style.display = "none";
      popup.innerHTML = "";
  });
  

• 如果弹窗初始需要隐藏，可以在CSS里预先设置#popup { display: none; }，这样首次调用时设置display: block的逻辑更统一。

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