問題情況

JS中設定window.location.href跳轉無效

程式碼如下：

 <script type="text/javascript">
   function checkUser()
{ 
     if(2!=1){
     	window.location.href="login.jsp";  
     }
}
  </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 }">確認預訂</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";  
     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 }">確認預訂</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";
     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";
     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
						style="font-weight: blod;">房號：</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>