onbeforeunload会弹2次窗口

`onbeforeunload` 是一个事件，通常用于在用户关闭窗口或者离开页面之前进行一些操作，比如提示用户是否要保存未保存的内容。但是，由于浏览器的实现差异，有些浏览器会在 `onbeforeunload` 事件触发时弹出两次确认窗口。

为了避免这种情况，可以在 `onbeforeunload` 事件处理函数中添加一个标志位，在第一次弹出确认窗口之后将标志位设置为 `true`，然后在第二次触发 `onbeforeunload` 事件时直接返回一个空字符串，这样就可以避免第二次弹出确认窗口了。代码示例：

let isConfirm = false;

window.onbeforeunload = function(e) {
  if (isConfirm) {
    return;
  }
  const message = '是否要离开页面？';
  e.returnValue = message;
  isConfirm = true;
  return message;
}

相关问题

function centerPopup() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 popup.style.position = "fixed"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; } // 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数 popupImg.onload = function() { // 设置图片缩放比例 var imgWidth = popupImg.width; var imgHeight = popupImg.height; var widthScale = window.innerWidth * 0.8 / imgWidth; var heightScale = window.innerHeight * 0.8 / imgHeight; scale = Math.min(widthScale, heightScale); popupImg.style.transform = scale(${scale}); // 设置弹出窗口样式和居中位置 setPopupStyle(); centerPopup(); // 显示图片和悬浮窗 popupImg.style.display = "block"; popup.style.display = "block"; } // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); }; };根据你提供的代码，我修改后任然存在行数过多时，悬浮窗显示后靠近页面底部，无法显示完整图片在当前页面，并且我需要在点击放大图片后无法再此点击当前放大图片，等我还原取消悬浮窗后才可以再次点击图片放大，我代码存在什么问题

根据您提供的代码，我注意到有几个问题可能导致您遇到的问题：

1. 悬浮窗显示在页面底部：这可能是由于计算偏移量时没有考虑到页面滚动的原因。您可以尝试将`scrollTop`的计算方式修改为`scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;`，以确保在不同浏览器中都能正确获取滚动的偏移量。

2. 图片无法再次点击放大：这可能是由于点击事件监听器没有正确设置。目前的代码中，点击悬浮窗时会隐藏弹出窗口，但没有阻止事件冒泡到图片上。您可以尝试添加以下代码来阻止点击事件冒泡：

popupImg.onclick = function (event) {
  event.stopPropagation();
};

这样点击图片时就不会再隐藏弹出窗口了。

希望这些修改可以解决您遇到的问题。如果问题仍然存在，请提供更多的细节，以便我能够更准确地帮助您解决问题。

function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; var isDragging = false; var startX, startY, translateX, translateY; // 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; // 居中弹出窗口 function centerPopup() { var windowHeight = window.innerHeight; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offset = (windowHeight - (imgHeight * scale)) / 2 + scrollTop; // 设置弹出窗口的垂直位置 popup.style.top = offset + "px"; } // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); }; };需要不管第几行第几列的图片放大时，放大的悬浮窗始终在当前页面最中心

要实现让放大的悬浮窗始终在当前页面最中心，你可以在 `centerPopup` 函数中添加一些代码来实现。在 `popup.style.top` 的赋值语句之前，你可以先计算出窗口的高度和弹出窗口的高度，然后使用这些值来计算垂直偏移量，使弹出窗口保持在页面中心位置。

以下是修改后的代码示例：

// 居中弹出窗口
function centerPopup() {
  var windowHeight = window.innerHeight;
  var popupHeight = popup.offsetHeight;
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var offset = (windowHeight - popupHeight) / 2 + scrollTop;

  // 设置弹出窗口的垂直位置
  popup.style.top = offset + "px";
}

这样，无论点击页面上的哪张图片放大，弹出窗口都会始终显示在页面的中心位置。