如何实现点击按钮刷新页面后显示#results div？

我制作了一个分为输入区和结果区的计算器，结果区关联Google Sheet，加载需要数秒时间。最初通过点击按钮跳转至另一页面显示结果，该方案可行。现在需要将输入区与结果区放在同一页面，请问能否让#results div保持隐藏状态，直到点击按钮刷新页面后再显示？

现有代码 #

<div class="calculator" data-calc-id="Lyh7nBH9MiharKMDu" data-type="framed"></div>
<script src="https://scripts.convertcalculator.com/embed.js" async="true"></script>

<div id="results" class="results-style">
  <div class="calculator" data-calc-id="ogNjyteRSgnEHv6Ps" data-type="framed"></div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <canvas id="myChart"></canvas>
</div>

可以通过CSS默认隐藏结果区，再结合JavaScript实现点击按钮后显示的效果，分两种场景处理：

场景1：不刷新页面，提交后直接显示结果区 #

步骤1：添加CSS隐藏结果区 #

在样式中设置#results默认隐藏：

#results {
  display: none;
}

步骤2：监听计算器提交事件并显示结果区 #

利用ConvertCalculator的事件监听API，在输入计算器提交完成后显示结果区，按需重新加载结果计算器以获取最新数据：

document.addEventListener('DOMContentLoaded', function() {
  // 监听输入计算器的提交事件
  ConvertCalculator.on('submit', function(calc) {
    // 显示结果区
    document.getElementById('results').style.display = 'block';
    // 重新加载结果计算器确保数据最新
    ConvertCalculator.reload('ogNjyteRSgnEHv6Ps');
  });
});

场景2：点击按钮刷新页面后显示结果区 #

若需要强制刷新结果数据，可借助URL参数实现：

步骤1：添加触发按钮 #

在输入区下方添加按钮，点击时携带参数跳转至当前页面：

<button onclick="window.location.href = window.location.pathname + '?showResults=true';">计算并查看结果</button>

步骤2：页面加载时判断参数并显示结果区 #

添加JavaScript代码，在页面加载时检查URL参数，若存在则显示结果区：

window.addEventListener('load', function() {
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('showResults')) {
    document.getElementById('results').style.display = 'block';
  }
});

补充说明 #

• 场景1需确保ConvertCalculator嵌入脚本加载完成，事件监听才能正常触发；
• 场景2适合需要彻底刷新数据、避免缓存的场景。

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