Javascript 在甜蜜警报中单击“确定”按钮后如何重定向页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37358423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to redirect page after click on Ok button on sweet alert?
提问by Barmar
I am able to display sweet alert after the page refresh but I have to click on Ok button which I am getting on sweet alert to redirect the page.Please help me in this.
我可以在页面刷新后显示甜蜜警报，但我必须点击确定按钮，我正在进入甜蜜警报重定向页面。请帮助我。
<?php
echo '<script type="text/javascript">';
echo 'setTimeout(function () { swal("WOW!","Message!","success");';
echo '}, 1000);'
echo 'window.location.href = "index.php";';
echo '</script>';
?>
回答by Alexandre Ribeiro
Just make use of JavaScript promises. Put the thenmethod after swalfunction. We do notneed to use timer features.
For example:
只需使用 JavaScript 承诺。将then方法放在swal函数之后。我们并不需要使用定时器功能。例如：
swal({
title: "Wow!",
text: "Message!",
type: "success"
}).then(function() {
window.location = "redirectURL";
});
The promise method .thenis used to wait until the user reads the information of modal window and decide which decision to make by clicking in one button. For example, Yesor No.
promise 方法.then用于等待用户读取模态窗口的信息，并通过单击一个按钮来决定做出哪个决定。例如，Yes或No。
After the click, the Sweet Alert could redirect the user to another screen, call another Sweet Alert modal window with contains new and subsequent question, go to a external link, etc.
单击后，Sweet Alert 可以将用户重定向到另一个屏幕，调用另一个包含新问题和后续问题的 Sweet Alert 模式窗口，转到外部链接等。
Again, we do not have to use timerbecause it is much better to control user action. The user could wait for the eternity or take action as a Thanos' or Iron Man's finger snap.
同样，我们不必使用计时器，因为它可以更好地控制用户操作。用户可以等待永恒或采取行动，就像 Thanos 或钢铁侠的手指弹响一样。
With the use of promises, the code becomes shorter, clean and elegant.
通过使用promise，代码变得更短、更干净、更优雅。
回答by Barmar
To specify a callback function, you have to use an object as the first argument, and the callback function as the second argument.
要指定回调函数，您必须使用对象作为第一个参数，使用回调函数作为第二个参数。
echo '<script>
setTimeout(function() {
swal({
title: "Wow!",
text: "Message!",
type: "success"
}, function() {
window.location = "redirectURL";
});
}, 1000);
</script>';
回答by CONvid19
setTimeout(function () {
swal({
title: "Wow!",
text: "Message!",
type: "success",
confirmButtonText: "OK"
},
function(isConfirm){
if (isConfirm) {
window.location.href = "//stackoverflow.com";
}
}); }, 1000);<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">Or you can use the build-in function timer, i.e.:
或者您可以使用内置函数timer，即：
swal({
title: "Success!",
text: "Redirecting in 2 seconds.",
type: "success",
timer: 2000,
showConfirmButton: false
}, function(){
window.location.href = "//stackoverflow.com";
});<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">回答by Felipe Pena
I wasn't able to do that with any swal(sweatAlert) default callback function, so I forced with jquery, got the Ok button class inspecting the element in chrome an made something like this:
我无法使用任何 swal(sweatAlert) 默认回调函数来做到这一点，所以我强制使用 jquery，让 Ok 按钮类检查 chrome 中的元素并制作如下所示：
<script>
sweetAlert({
title:'Warning!',
text: 'Invalid user or password!',
type:'warning'
},function(isConfirm){
alert('ok');
});
$('.swal2-confirm').click(function(){
window.location.href = 'index.php';
});
</script>
The 'Ok' alert in function(isConfirm) was just a test to see if it would get into this function, if so I should be able to redirect from there, but I wasn't...
function(isConfirm) 中的“Ok”警报只是一个测试，看看它是否会进入这个函数，如果是的话，我应该能够从那里重定向，但我没有......
So I used jQuery to determine if the button "OK" of swal was clicked by getting it class: ".swal2-confirm' then I could redirect with success...
所以我使用jQuery来确定是否通过获取它的类来确定swal的按钮“OK”是否被点击：“.swal2-confirm”然后我可以成功重定向......
Hope this helps you all !
希望这对大家有帮助！
PS: I am using php echo to run the script, I din't have to leave php to run it, just use single quotes and you're done !
PS：我使用 php echo 来运行脚本，我不必离开 php 来运行它，只需使用单引号就可以了！
回答by Kapil Chhabra
Best and Simple solution, we can add more events as well!
最佳且简单的解决方案，我们还可以添加更多事件！
swal({ title: "WOW!",
text: "Message!",
type: "success"}).then(okay => {
if (okay) {
window.location.href = "URL";
}
});
回答by user731591
function confirmDetete(ctl, event) {
debugger;
event.preventDefault();
var defaultAction = $(ctl).prop("href");
swal({
title: "Are you sure?",
text: "You will be able to add it back again!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
$.get(ctl);
swal({
title: "success",
text: "Deleted",
confirmButtonText: "ok",
allowOutsideClick: "true"
}, function () { window.location.href = ctl })
// $("#signupform").submit();
} else {
swal("Cancelled", "Is safe :)", "success");
}
});
}
回答by Chidananda Nayak
Existing answers did not work for me i just used $('.confirm').hide(). and it worked for me.
现有的答案对我不起作用，我刚用过$('.confirm').hide()。它对我有用。
success: function(res) {
$('.confirm').hide()
swal("Deleted!", "Successfully deleted", "success")
setTimeout(function(){
window.location = res.redirect_url;
},700);
回答by Y. Joy Ch. Singha
I did it by using this code:
我是通过使用以下代码做到的：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
<script>
$(".confirm").on('click',function(){
window.location.href = "index.php";
});
</script>
Thanks.
谢谢。
回答by Mohan Raj
setTimeout(function(){
Swal.fire({
title: '<span style="color:#fff">Kindly click the link below</span>',
width: 600,
showConfirmButton: true,
confirmButtonColor: '#ec008c',
confirmButtonText:'<span onclick="my2()">Register</span>',
padding: '3em',
timer: 10000,
background: '#fff url(bg.jpg)',
backdrop: `
rgba(0,0,123,0.4)
center left
no-repeat
`
})
}, 1500);
}
function my2() {
window.location.href = "https://www.url.com/";
}
回答by mnis.p
I think this will help. It's same as given by Mr. Barmer. But I have enclosed this within php tags.
我认为这会有所帮助。这与 Barmer 先生给出的相同。但我已将其包含在 php 标签中。
Here it goes....
就到这里了....
<?php if(!empty($_GET['submitted'])):?>
<script>
setTimeout(function() {
swal({
title: "Congratulaions!",
text: "Signed up successfully, now verify your mail",
type: "success",
confirmButtonText: "Ok"
}, function() {
window.location = "index.php";
}, 1000);
});
</script>
<?php endif;?>
