JavaScript/HTML页面刷新通知

-1

我试图在JavaScript中发出警告，警告用户他们可能不应该重新加载页面。但我希望他们能够在没有提示的情况下导航到其他页面，而不是刷新当前页面。我发现了一些警报，但它们要么在两种情况下都提供警报，要么提供警报并刷新页面。我希望用户被警告，然后能够停止刷新页面。我想这意味着他们在离开之后也不应该回到页面。JavaScript/HTML页面刷新通知

来源

2016-12-16 fryingpantheist

我搜索了一下，我一直无法找到任何可靠或确定的事件，它检测到页面刷新。您可能会考虑避免页面刷新成为问题的情况。我可以想到几种方法：在POST上显示 *，显示'谢谢发布'或类似的内容，然后通过标题或javascript将用户重定向到另一个页面，显示您想要显示的内容 *使用AJAX执行发布操作。如果你这样做，那么浏览器刷新按钮和/或F5将不会重新执行AJAX，但会刷新当前页面。 –

该页面将为用户提供一个随机数字，而我只是不希望他们能够继续获得新的随机数字。 – fryingpantheist

考虑将其存储在cookie中。就像'如果用户没有cookie，给他们一个新的随机数，否则从cookie中随机数'。 –

<body onunload="window.alert('Hello!');">

来源

2016-12-16 19:22:38 oompahlumpa

您可以使用onbeforeunload，并设置一个变量，如下所示：

var l=false; 
 
window.onbeforeunload = function() { 
 
    if (!l) { 
 
    return "you shouldn't leave"; 
 
    } 
 
}

<a href="//google.com" onclick="l=true">Leave</a>

（这不会对运行片段工作，因为它是在iframe）

来源

2016-12-16 19:24:24 k97513

这是我尝试使用的，它很好，但我希望用户能够进入不同的页面。 – fryingpantheist

-1

这你可能会觉得有用。结合上面的代码;;;

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style> 
    #dialogoverlay{ 
    display: none; 
    opacity: .8; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    background: #FFF; 
    width: 100%; 
    z-index: 10; 
} 
#dialogbox{ 
    display: none; 
    position: fixed; 
    background: #000; 
    border-radius:7px; 
    width:550px; 
    z-index: 10; 
} 
#dialogbox > div{ background:#FFF; margin:8px; } 
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; } 
#dialogbox > div > #dialogboxbody{ background: #333; padding:20px; color:#FFF; } 
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; } 
</style> 
<script> 
    function CustomAlert(){ 
    this.render = function(dialog){ 
     var winW = window.innerWidth; 
     var winH = window.innerHeight; 
     var dialogoverlay = document.getElementById('dialogoverlay'); 
     var dialogbox = document.getElementById('dialogbox'); 
     dialogoverlay.style.display = "block"; 
     dialogoverlay.style.height = winH+"px"; 
     dialogbox.style.left = (winW/2) - (550 * .5)+"px"; 
     dialogbox.style.top = "100px"; 
     dialogbox.style.display = "block"; 
     document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message"; 
     document.getElementById('dialogboxbody').innerHTML = dialog; 
     document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>'; 
    } 
    this.ok = function(){ 
     document.getElementById('dialogbox').style.display = "none"; 
     document.getElementById('dialogoverlay').style.display = "none"; 
    } 
} 
var Alert = new CustomAlert(); 
function deletePost(id){ 
    var db_id = id.replace("post_", ""); 
    // Run Ajax request here to delete post from database 
    document.body.removeChild(document.getElementById(id)); 
} 
function CustomConfirm(){ 
    this.render = function(dialog,op,id){ 
     var winW = window.innerWidth; 
     var winH = window.innerHeight; 
     var dialogoverlay = document.getElementById('dialogoverlay'); 
     var dialogbox = document.getElementById('dialogbox'); 
     dialogoverlay.style.display = "block"; 
     dialogoverlay.style.height = winH+"px"; 
     dialogbox.style.left = (winW/2) - (550 * .5)+"px"; 
     dialogbox.style.top = "100px"; 
     dialogbox.style.display = "block"; 

     document.getElementById('dialogboxhead').innerHTML = "Confirm that action"; 
     document.getElementById('dialogboxbody').innerHTML = dialog; 
     document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes(\''+op+'\',\''+id+'\')">Yes</button> <button onclick="Confirm.no()">No</button>'; 
    } 
    this.no = function(){ 
     document.getElementById('dialogbox').style.display = "none"; 
     document.getElementById('dialogoverlay').style.display = "none"; 
    } 
    this.yes = function(op,id){ 
     if(op == "delete_post"){ 
      deletePost(id); 
     } 
     document.getElementById('dialogbox').style.display = "none"; 
     document.getElementById('dialogoverlay').style.display = "none"; 
    } 
} 
var Confirm = new CustomConfirm(); 
</script> 
</head> 
<body> 
<div id="dialogoverlay"></div> 
<div id="dialogbox"> 
    <div> 
    <div id="dialogboxhead"></div> 
    <div id="dialogboxbody"></div> 
    <div id="dialogboxfoot"></div> 
    </div> 
</div> 
<p id="post_1"> 
    Today is a lovely day ... 
    <button onclick="Confirm.render('Delete Post?','delete_post','post_1')">Delete</button> 
</p> 
<p id="post_2"> 
    I like pickles ... 
    <button onclick="Confirm.render('Delete Post?','delete_post','post_2')">Delete</button> 
</p> 
<button onclick="Alert.render('Hello World')">Custom Alert</button> 
</body> 
</html>

这可以让你给自定义警报。
此处的代码暴露：Alert Box

来源

2016-12-16 19:42:09

JavaScript/HTML页面刷新通知

回答

相关问题