onbeforeunload会弹2次窗口
时间: 2023-10-11 13:21:35 浏览: 44
`onbeforeunload` 是一个事件,通常用于在用户关闭窗口或者离开页面之前进行一些操作,比如提示用户是否要保存未保存的内容。但是,由于浏览器的实现差异,有些浏览器会在 `onbeforeunload` 事件触发时弹出两次确认窗口。
为了避免这种情况,可以在 `onbeforeunload` 事件处理函数中添加一个标志位,在第一次弹出确认窗口之后将标志位设置为 `true`,然后在第二次触发 `onbeforeunload` 事件时直接返回一个空字符串,这样就可以避免第二次弹出确认窗口了。代码示例:
```javascript
let isConfirm = false;
window.onbeforeunload = function(e) {
if (isConfirm) {
return;
}
const message = '是否要离开页面?';
e.returnValue = message;
isConfirm = true;
return message;
}
```
相关问题
离开网站的时候弹出窗口怎么关闭
你可以使用 JavaScript 中的 `window.onbeforeunload` 事件来检测用户是否要离开页面,并在用户要离开页面时弹出提示框。如果用户点击了“留在此页”按钮,则不会离开页面;如果用户点击了“离开此页”按钮,则会离开页面。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>离开页面提示框</title>
<script>
window.onbeforeunload = function() {
return "您确定要离开此页面吗?";
};
</script>
</head>
<body>
<h1>离开页面提示框示例</h1>
<p>当您试图离开此页面时,会弹出提示框。</p>
</body>
</html>
```
在这个示例代码中,当用户试图离开页面时,会弹出一个提示框,提示框中会显示“您确定要离开此页面吗?”。用户可以点击“留在此页”或“离开此页”按钮来决定是否要离开页面。如果用户点击了“留在此页”按钮,则页面不会离开,如果用户点击了“离开此页”按钮,则会离开页面。
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` 的赋值语句之前,你可以先计算出窗口的高度和弹出窗口的高度,然后使用这些值来计算垂直偏移量,使弹出窗口保持在页面中心位置。
以下是修改后的代码示例:
```javascript
// 居中弹出窗口
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";
}
```
这样,无论点击页面上的哪张图片放大,弹出窗口都会始终显示在页面的中心位置。