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

How to show an alert after reloading the page in JavaScript?

提问by lyhong

I am trying to make alert box after page reloaded, but it doesn't work.
Please correct my code and tell me why?

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

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

回答by Akhil Sekharan

You can use sessionStorage:

您可以使用sessionStorage：

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

$( function () {
        if ( sessionStorage.reloadAfterPageLoad ) {
            alert( "Hello world" );
            sessionStorage.reloadAfterPageLoad = false;
        }
    } 
);

回答by Michael Unterthurner

That's called onload. It came waaaaay before DOM ready was around, and DOM ready was actually created for the exact reason that onload waited on images.

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

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

And a jQuery Javascript solution is to bind the window.onload event in document.ready().

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

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

回答by suhailvs

Some dirty method of doing it with ?reloadstring in link href like request.GETin php

使用?reload链接 hrefrequest.GET中的字符串执行此操作的一些肮脏方法，例如在 php 中

<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>

回答by Sagar W

Step 1 : Write your own function for alert popup with ok button (i have created parameterized function which accept message, alert type, method name.

第 1 步：为带有 ok 按钮的警报弹出窗口编写自己的函数（我已经创建了接受消息、警报类型、方法名称的参数化函数。

function 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');
 }

函数 AlertMessageOk（str，alertType，方法）
{

     $('#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');
 }

Step 2: On your ajax response.result == true call to AlertMessageOk function. I have passed method name to reload page.

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

function buttonActivate_onClick(storeID) {

功能 buttonActivate_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();        
 }

回答by Rocco

Hui, a old post. But i′m looking too for a solution to add a script after reload when click a order save button in woocommerce admin order. I think it is a great way to use the sessionStorage and not some hooks. Thanks to Akhil for open the eyes. Maybe some one looking too:

辉，旧帖。但是我也在寻找一种解决方案，当单击 woocommerce 管理订单中的订单保存按钮时重新加载后添加脚本。我认为这是使用 sessionStorage 而不是一些钩子的好方法。感谢 Akhil 睁开眼睛。也许有人也在看：

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');
            }
});