如何设置onclick弹窗仅在页面重载后触发一次？

嘿，我来帮你搞定这个问题！你的代码现在每次点击页面都会触发弹窗，要改成页面重载（刷新）后只触发一次的话，我们可以用**会话存储（sessionStorage）**来标记弹窗是否已经触发过，这样就能确保在同一次会话（页面刷新后属于同一会话，关闭标签页则重置）里弹窗只出现一次。

修改后的代码（点击页面触发但仅一次） #

<script language="javascript">
<!-- 
function PopUp() {
  // 检查会话存储中是否有弹窗已触发的标记
  if (!sessionStorage.getItem('popupShown')) {
    var TheURL = "http://www.widgetsu.com/";
    var PopWidth = "1000";
    var PopHeight = "1000";
    var PosTop = "";
    var PosLeft = "";
    var SettingS = "toolbar=no,menubar=no,scrollbars=no,resizable=yes,width=" + PopWidth + ",height=" + PopHeight + ",top=" + PosTop + ",left=" + PosLeft;
    var PopUp = open(TheURL,"box",SettingS);
    // 标记弹窗已触发，当前会话内不再重复执行
    sessionStorage.setItem('popupShown', 'true');
  }
}
window.onclick=PopUp; 
// -->
</script>

另一种需求：页面加载后自动弹一次（无需点击） #

如果你想要的是页面刷新后自动弹出一次，不需要用户点击触发，可以把触发逻辑改成页面加载完成时执行：

<script language="javascript">
<!-- 
function PopUp() {
  if (!sessionStorage.getItem('popupShown')) {
    var TheURL = "http://www.widgetsu.com/";
    var PopWidth = "1000";
    var PopHeight = "1000";
    var PosTop = "";
    var PosLeft = "";
    var SettingS = "toolbar=no,menubar=no,scrollbars=no,resizable=yes,width=" + PopWidth + ",height=" + PopHeight + ",top=" + PosTop + ",left=" + PosLeft;
    var PopUp = open(TheURL,"box",SettingS);
    sessionStorage.setItem('popupShown', 'true');
  }
}
// 页面加载完成后自动执行弹窗逻辑
window.addEventListener('load', PopUp);
// -->
</script>

原理说明 #

• sessionStorage是浏览器提供的会话级存储，数据会在当前标签页关闭时被清除，但页面刷新时会保留。
• 通过检查popupShown标记，我们可以判断弹窗是否已经在当前会话中触发过，从而避免重复弹窗。
• 如果需要跨会话（比如用户关闭浏览器再打开也只弹一次），可以把sessionStorage换成localStorage，不过这种场景下通常会话存储更符合需求。

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