Question

我有一个关于导航离开我正在进行的网页的问题。所以我的一般结构是这样的，

我有一个主页componentmanagement.php，其中包含带有函数的加载器，如

<li>
                            <a onclick="component('MONITOR')" style="cursor: pointer;">
                                <i class="fa fa-exchange"></i> <span>Component Monitor</span>
                            </a>
                        </li>
                        <li>
                            <a onclick="component('LIST')" style="cursor: pointer;">
                                <i class="fa fa-power-off" style="color: #D90005;"></i> <span>List Component</span>
                            </a>
                        </li>

            <aside class="right-side">
                <!-- Content Header (Page header) -->

                <!-- Main content -->
                <section class="content" id="maincontent"></section><!-- /.content -->

            </aside><!-- /.right-side -->

并且加载函数是这样的，

 function component(param) {
                                    var job = $("#job").val();
                                    var subjob = $("#subjob").val();
                                    switch (param) {
                                        case "MONITOR":
                                            $.ajax({
                                                type: 'POST',
                                                url: "divpages/monitorcomponent.php",
                                                beforeSend: function (xhr) {
                                                    $('#maincontent').html();
                                                },
                                                success: function (response, textStatus, jqXHR) {
                                                    $('#maincontent').html(response);
                                                }
                                            });
                                            break; // END OF CASE

                                        case "LIST":
                                            $.ajax({
                                                type: 'POST',
                                                url: "divpages/listcomponent.php",
                                                data: {job:job, subjob:subjob},
                                                beforeSend: function (xhr) {
                                                    $('#maincontent').html();
                                                },
                                                success: function (response, textStatus, jqXHR) {
                                                    $('#maincontent').html(response);
                                                }
                                            });
                                            break; // END OF CASE }}

我的问题是如何在离开具有这种结构的页面之前实现确认。如果我正在使用href，我可以编程。请帮我解决这个案子。让我说我现在在MONITOR上，但是当用户不小心点击退出或点击浏览器上的关闭时，确认应该出现..

提前感谢您的帮助。

Answer 1

您可以使用[{product_sku: "9AYSNL", total_orders: 4, total_order_amount: "29.95"}, {product_sku: "EZAY1D", total_orders: 1, total_order_amount: "21.98"}]事件来完成此操作，如下所示。

window.onbeforeunload

Answer 2

由于您的网站似乎是ajax驱动的，因此页面未被正常卸载，因此常规onunload无法正常工作，您需要手动弹出确认对话框并询问用户如果他/她想要离开等等。

像

这样的东西

function component(param) {
    if ( confirm("Are you sure you want to leave this magnificent page ?") ) {
        var job = $("#job").val();
        var subjob = $("#subjob").val();
        switch (param) {
            case "MONITOR":
                $.ajax({
                    type: 'POST',
                    url: "divpages/monitorcomponent.php",
                    beforeSend: function (xhr) {
                        $('#maincontent').html();
                    },
                    success: function (response, textStatus, jqXHR) {
                        $('#maincontent').html(response);
                    }
                });
                break; // END OF CASE

            case "LIST":
                $.ajax({
                    type: 'POST',
                    url: "divpages/listcomponent.php",
                    data: {
                        job: job,
                        subjob: subjob
                    },
                    beforeSend: function (xhr) {
                        $('#maincontent').html();
                    },
                    success: function (response, textStatus, jqXHR) {
                        $('#maincontent').html(response);
                    }
                });
                break; // END OF CASE }}
        }
    }
}

使用AJAX导航离开页面的确认窗口

2 个答案: