javascript 中設置window.location.href跳轉無效問題解決辦法
問題情況
JS中設置window.location.href跳轉無效
代碼如下：
<script type="text/javascript">
function checkUser()
{
if(2!=1){
window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
}
}
</script>
<div class="extra">
<a class="ui blue right floated primary button" onclick="checkUser()" href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime }" rel="external nofollow" rel="external nofollow" >確認預訂</a>
</div>
原因是 a標簽的href跳轉會執行在window.location.href設置的跳轉之前:
如果是表單form的話 也會先執行form提交。
提交之后 就已經不在當前頁面了。所以 window.location.href無效。
解決方法一
在js函數中加上
window.event.returnValue=false
這個屬性放到提交表單中的onclick事件中在這次點擊事件不會提交表單，如果放到超鏈接中則在這次點擊事件不執行超鏈接href屬性。
改成如下代碼后window.location.href成功跳轉:
<script type="text/javascript">
function checkUser()
{
if(2!=1){
window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
window.event.returnValue=false;
}
}
</script>
<div class="extra">
<a class="ui blue right floated primary button" onclick="checkUser()" href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime }" rel="external nofollow" rel="external nofollow" >確認預訂</a>
</div>
解決方法二
點擊事件中 onclick="checkUser()" 變成 onclick="return checkUser();"
并且在 checkUser中 return false;這樣的話 a標簽的href也不會執行。 這樣就能window.location.href順利跳轉。
代碼如下:
<script type="text/javascript">
function checkUser()
{
if(<%=flag%>!=1){
window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
return false;
}
}
</script>
<div class="extra">
<a class="ui blue right floated primary button" onclick="return checkUser();"
href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime
}">確認預訂</a>
</div>
解決方法三
如果是form體提交的話還可以把summit改成button調用js提交，這樣window.location.href也會在js提交summit之前執行成功跳轉。
如下：
function checkUser()
{
if(<%=flag%>!=1){
window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
return false;
}
document.getElementById("form").submit();
}
<form action="addRoom" method="post" name="from" id="form">
<table align="center" border="1" class="commTable">
<tr>
<td class="right"><span
>房號：</span></td>
<td><input type="text" name="roomNum" size="25"
id="roomNum" /></td>
</tr>
<tr>
<td colspan="2" align="center"><button value="添加"
onclick="checkUser()" /></td>
</tr>
</table>
</form>
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
