如何在 JavaScript 中重新加载页面后显示警报？

Question

我试图在页面重新加载后创建警报框，但它不起作用。
请更正我的代码并告诉我原因？

$("button").click(function(){
    window.location.reload();
    alert("Hello world");
});

Answer 1

您可以使用

sessionStorage

：

$( "button" ).click( function () {
        sessionStorage.setItem('reloadAfterPageLoad', 'true');
        window.location.reload();
    } 
);

$( function () {
        if ( sessionStorage.getItem('reloadAfterPageLoad') === 'true' ) {
            alert( "Hello world" );
            sessionStorage.setItem('reloadAfterPageLoad', 'false');
        }
    } 
);

Answer 2

这就是所谓的onload。它是在 DOM Ready 出现之前就出现的，而 DOM Ready 的创建实际上就是为了 onload 等待图像的确切原因。

window.onload = function () { 
    alert("It's loaded!");
    //dom not only ready, but everything is loaded
}

而 jQuery Javascript 的解决方案是在 document.ready() 中绑定 window.onload 事件。

$(window).bind("load", function() {
   // code here
});

Answer 3

慧，老帖子了。但我也在寻找一种解决方案，以便在单击 woocommerce 管理订单中的订单保存按钮时重新加载后添加脚本。我认为这是使用 sessionStorage 的好方法，而不是一些钩子。感谢阿基尔让我大开眼界。也许有人也在看：

jQuery('.button.save_order.button-primary').click(function() {

            sessionStorage.setItem('save_order',true);

});

jQuery( function () {
        if ( sessionStorage.getItem('save_order') ) {
                alert( "Hello world" );
                sessionStorage.removeItem('save_order');
            }
});

Answer 4

使用链接href中的

?reload

字符串执行此操作的一些肮脏方法，例如php中的

request.GET

<a class="button" href="?reload/">reload and alert</a>
<script type="text/javascript">         
    args = location.search.substr(1);
    if (args=='reload/')alert('page reloaded');  
</script>

Answer 5

第 1 步：使用“确定”按钮编写自己的警报弹出函数（我已经创建了接受消息、警报类型、方法名称的参数化函数。

函数AlertMessageOk(str,alertType,method)
{

     $('#AlertMessage .divDialogElements').empty();

     $('#AlertMessage .divDialogElements').append(msg);

     if (alertType == "success") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Success");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-success");
     }
     else if (alertType == "error") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Error");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-danger");
     }
     else if (alertType == "info") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Status");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-info");
     }
     else if (alertType == "warning") {
         $('#AlertMessage #modalAlertHeaderTitle').html("Warning");
         $('#AlertMessage #modalAlertHeaderTypeClass').attr("class", "modal-header alert-warning");
     }

     $('#AlertMessage #btnAlertOk').attr("onclick", method);

     $('#AlertMessage').modal('show');
 }

第 2 步：在 ajax response.result == true 上调用 AlertMessageOk 函数。我已传递方法名称来重新加载页面。

功能按钮Activate_onClick(storeID) {

     $.ajax({
         type: "POST",
         url: "/configuration/activateStore",
         timeout: 180000,
         data: { StoreID: storeID },
         success: function (response) {
             if (response.result == true) {
                 AlertMessageOk("Store configuration for Store ID " + storeID + " is successfully activated.", "success", "reloadPage();");
             }
         },
         error: function (xhr, textstatus) {
             AlertMessage("Error:   " + xhr.statusText + "  [" + xhr.status + "]", "error");

         }
     });
     $('#wait_load').css("display", "none");
 }


 function reloadPage() {
   location.reload();        
 }