将按钮弹窗功能从HTML文件导入至另一文件失败问题排查

问题描述 #

原本在单个HTML文件中可正常运行的按钮点击弹窗功能，拆分到regions.html（包含样式、按钮和弹窗结构）、script.js（包含逻辑代码）并导入到目标HTML文件后，点击按钮无法弹出弹窗。相关代码如下：

regions.html文件 #

<style>   
#btn_region {
  position: absolute; /* create a positioning context for the list items */
  width: 23%;
  left: 51vw;
  top: 130vw;
  font-size: 14px;
  height: 9vw;
  z-index: 1000;
}
#box_region {
  position: absolute;
  width: 90%;
  height: 27%;
  background-color: #f1f1f1;
  left: 0px;
  top: 138vw;
}
.regions {
  width:80%;
  height:60.15%;
}
</style>
<button id='btn_region'>Region</button>
<div id='box_region' style='display:none;'>
  <div id='div_region'>
      <a id='neus' href='$(url)'>
              <h1><span class='color-change' >Northeast</span></h1> 
      <img class='regions' src='#' width='300' height='225'>
      </a>
  </div>
  <div id='div_region'>
      <a id='usa' href='$(url)'>
        <h1><span class='color-change' >USA</span></h1> 
      <img class='regions' src='#' width='300' height='225'>
      </a>
  </div>
</div>

原script.js文件 #

const regions = document.querySelector('.regions')
fetch('regions.html')
.then(res=>res.text())
.then(data=>{
    regions.innerHTML=data
    const parser = new DOMParser()
    const doc = parser.parseFromString(data, 'text/html')
    eval(doc.querySelector('script').textContent)
})
let mainDirectory = '#'
let neus_href = document.getElementById('neus');
neus_href.href = mainDirectory+'neus.html';
let usa_href = document.getElementById('usa');
usa_href.href = mainDirectory+'usa.html';
const btn_region = document.getElementById('btn_region');
const box_region = document.getElementById('box_region');

btn_region.addEventListener('click', function() {
  if (box_region.style.display === 'block') {
    box_region.style.display = 'none';
  } else {
    box_region.style.display = 'block';
  }
});
document.addEventListener('click', function(event) {
  if (event.target !== btn_region && event.target !== box_region) {
    box_region.style.display = 'none';
  }
});

目标导入文件 #

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="regions"></div>
    <script src="script.js"></script>
</body>
</html>

问题根源 #

1. DOM元素获取时机错误：脚本中直接执行的元素获取（document.getElementById('neus')、document.getElementById('btn_region')等）是在fetch请求完成前执行的，此时regions.html的内容还未插入到页面，获取到的元素为null，导致后续的href修改、事件绑定全部失效。
2. 无效的脚本处理：regions.html中并没有script标签，代码里的DOMParser和eval逻辑完全多余，甚至可能抛出错误中断执行。
3. CSS语法错误：regions.html的style中.regions选择器后多了一个闭合括号}，会导致样式解析异常。

修复方案 #

将所有依赖DOM元素的操作放到fetch的回调函数中，确保元素已经插入页面后再执行；移除无用的DOM解析和eval代码；修正CSS语法错误。

修改后的script.js #

const regions = document.querySelector('.regions');
const mainDirectory = '#';

fetch('regions.html')
  .then(res => res.text())
  .then(data => {
    // 将regions.html内容插入页面
    regions.innerHTML = data;
    
    // 修改链接地址
    const neus_href = document.getElementById('neus');
    neus_href.href = mainDirectory + 'neus.html';
    const usa_href = document.getElementById('usa');
    usa_href.href = mainDirectory + 'usa.html';
    
    // 获取按钮和弹窗元素并绑定事件
    const btn_region = document.getElementById('btn_region');
    const box_region = document.getElementById('box_region');

    btn_region.addEventListener('click', function() {
      box_region.style.display = box_region.style.display === 'block' ? 'none' : 'block';
    });
    
    document.addEventListener('click', function(event) {
      if (event.target !== btn_region && !box_region.contains(event.target)) {
        box_region.style.display = 'none';
      }
    });
  })
  .catch(err => console.error('加载regions.html失败:', err));

修正后的regions.html（仅修正CSS语法） #

<style>   
#btn_region {
  position: absolute; /* create a positioning context for the list items */
  width: 23%;
  left: 51vw;
  top: 130vw;
  font-size: 14px;
  height: 9vw;
  z-index: 1000;
}
#box_region {
  position: absolute;
  width: 90%;
  height: 27%;
  background-color: #f1f1f1;
  left: 0px;
  top: 138vw;
}
.regions {
  width:80%;
  height:60.15%;
}
</style>
<button id='btn_region'>Region</button>
<div id='box_region' style='display:none;'>
  <div id='div_region'>
      <a id='neus' href='$(url)'>
              <h1><span class='color-change' >Northeast</span></h1> 
      <img class='regions' src='#' width='300' height='225'>
      </a>
  </div>
  <div id='div_region'>
      <a id='usa' href='$(url)'>
        <h1><span class='color-change' >USA</span></h1> 
      <img class='regions' src='#' width='300' height='225'>
      </a>
  </div>
</div>

补充说明 #

• 事件委托优化：原代码中判断点击外部隐藏弹窗的逻辑不够严谨，改用box_region.contains(event.target)可以判断点击是否在弹窗内部，避免弹窗内子元素点击时误关闭。
• 错误处理：添加catch捕获fetch请求失败的情况，方便排查加载错误。

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