游戏结果页标签关闭按钮仅首次生效，切换条目后失效的解决方法

打开新标签页后，PHP脚本展示数据库中存储的游戏月度赛事最新结果，用户可通过表单的年、月下拉框切换赛事，选择后表单自动提交刷新页面。页面底部的关闭按钮仅在显示首个条目时有效，切换赛事后失效。

相关表单代码片段：

<form name="#" method="post">
  ...
  <label>year: <select name="turnierJahr" id="turnierJahr" onchange='this.form.submit()'>...</select></label>
  ...
  <label>month: <select name="turnierMonat" id="turnierMonat" onchange='this.form.submit()'>...</select></label>
  <noscript><input type="submit" name="submit" value="submit" /></noscript>
</form>

关闭按钮代码：

<button class="grossText" type="button" value="schliessen" onclick="self.close()">关闭</button>

已知Firefox、Chrome默认限制脚本关闭非由脚本自身打开的标签页，现求助可行解决方案。

• 方案1：AJAX异步加载数据，避免页面刷新
  不用表单提交刷新整个页面，改用AJAX请求获取赛事数据并更新页面内容，这样当前标签页始终是最初脚本打开的上下文，关闭按钮的self.close()会一直有效。
  实现思路：

  1. 移除下拉框的onchange='this.form.submit()'，绑定自定义事件；
  2. 通过fetch发送年、月参数到PHP接口；
  3. 将返回的赛事结果渲染到页面指定区域，全程不刷新页面。

• 方案2：通过脚本重新打开带参数的页面（备选）
  当下拉框选择年/月时，先关闭当前标签页，再用window.open()打开带年、月参数的新页面。注意这种方式可能被浏览器拦截弹窗，需要提前引导用户允许弹窗，且用户体验一般。
  代码修改示例：

  // 给年下拉框绑定事件
  document.getElementById('turnierJahr').addEventListener('change', function() {
    const year = this.value;
    const month = document.getElementById('turnierMonat').value;
    const targetUrl = `当前页面的URL?year=${year}&month=${month}`;
    window.open(targetUrl, '_blank');
    self.close();
  });
  // 月下拉框做相同逻辑处理
  

  同时PHP脚本需要支持从URL的GET参数中读取年、月，而不是仅依赖POST请求。

• 方案3：提示用户手动关闭（最稳妥兼容方案）
  鉴于浏览器安全限制越来越严格，脚本关闭标签的行为极易被限制，可在切换赛事后，让关闭按钮点击时提示用户手动关闭标签页。
  修改后的按钮及事件：

  function tryClose() {
    try {
      self.close();
    } catch(err) {
      alert('请手动关闭此标签页');
    }
  }
  

  <button class="grossText" type="button" value="schliessen" onclick="tryClose()">关闭</button>
  

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