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頁面刷新通知

回答

相關問題