Question

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
          <a href="http://www.google.co.in">Google</a>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

下面的

是custom.js

中的代码

$(window).on('beforeunload',function (){
     alert("abc");
});

我希望页面在点击链接后转到下一页之前显示提醒，但它没有显示。

Answer 1

beforeunload运行良好，但在您的情况下，由于使用了浏览器阻止的警报，因此无效，因此您可以在控制台中进行打印但不能在{ {1}}

在上面的示例中，我使用过控制台。

＆＃13;

beforeunload

＆＃13;

$(window).on("beforeunload",function(event){
   console.log("This works , but alert is blocked ");
  
   // alert(""); this wont work and it's blocked by the browser due to window's object missing 
})

＆＃13;

Answer 2

Chrome阻止了beforeunload中的警报，因为他们选择这样做。

您可以收听链接的点击事件并发出如下确认：

var link = document.querySelectorAll('a.confirmation')[0];

link.onclick = function () {
    var check = confirm('Are you sure ?');
    if (check === true) {
        return true;
    }
    else {
        return false;
    }
}

<a href="http://www.google.co.in" class="confirmation">Google</a>

或使用jQuery

$(".confirmation").on('click', function () {
    var check = confirm('Are you sure ?');
    if (check === true) {
        return true;
    }
    else {
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.co.in" class="confirmation">Google</a>

卸货前警报未显示

2 个答案: