gpt4 book ai didi

JavaScript 在提交表单和打开新选项卡之前重定向

转载 作者:行者123 更新时间:2023-12-03 04:22:23 26 4
gpt4 key购买 nike

我有一种情况,当用户单击表单上的“提交”时,我需要打开一个到外部站点的新选项卡,同时我需要将原始选项卡重定向到不同的页面以防止用户向外部站点发出多个重复请求。

注意:已经在后端防止这种行为,我只是想使用 JavaScript 尽可能改进用户体验,删除选项的渲染首先。

注意2:这适用于 Firefox,但不适用于 Chrome 或 Safari。

下面显示了一些说明我的问题的示例代码:

<script type="text/javascript">
function testFunction(){
alert("Executing testFunction()!");
window.location.replace("http://www.google.com");
}
// uncomment this line to show that testFunction() does work when called directly
//testFunction();
</script>
<html>
<head>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction()">
</form>
</body>
</html>

当我单击“提交”时,我观察到弹出警报,但重定向并未执行。

如果我取消直接调用 testFunction() 的行的注释,它会按预期工作。

如何获得我正在寻找的行为?

最佳答案

这是我经过一番修改后想出来的。您可以将单击事件从 onclick 传递到处理函数中。如果您让事件发生,它只会提交表单并阻止所有后续执行,这就是为什么我使用 preventDefault 停止原始点击事件并触发 form.submit() 以编程方式。另请注意我如何将重定向包装在 setTimeout 中,以便为 submit() 在重定向之前实际发生提供时间。

<html>
<head>
<script type="text/javascript">
function testFunction(e) {
e.preventDefault();
e.target.parentNode.submit();
alert("Executing testFunction()!");
setTimeout(function() {
document.location.href = "http://www.google.com";
}, 0);

}
// uncomment this line to show that testFunction() does work when called directly
// testFunction();
</script>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction(event)">
</form>
</body>
</html>

关于JavaScript 在提交表单和打开新选项卡之前重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43888913/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com