1. 程式人生 > >使用iframe框架後的頁面,執行跳轉命令,目標頁面內嵌至iframe的子頁面的解決方法

使用iframe框架後的頁面,執行跳轉命令,目標頁面內嵌至iframe的子頁面的解決方法

問題描述:

        在做專案的過程中,需要完成修改密碼後重新登入的功能,但是前端頁面使用了IFrame的框架,修改頁面內嵌在的index.html中,

重新登入的頁面就內嵌到原來的頁面中。

問題如圖所示:

修改密碼成功後:

出現問題,修改密碼頁面跳轉到的登入頁面內建到了子頁面中

 登入後出現瞭如下頁面:

 前端使用的是AngularJs,後臺使用的springSecurity做的安全控制

原來程式碼:

password.html

	     
 <a data-toggle="modal" class="btn btn-danger" 
   ng-click="alterPassword(oldPassword,newPassword,password)">提交修改</a>

Service.js

//修改密碼
	this.alterPassword=function(oldPassword,newPassword){
		return $http.get('../teacher/alterPassword.do?oldPassword='+oldPassword+'&newPassword='+newPassword);
	}

Controller.js

	//修改使用者密碼
	$scope.alterPassword=function(oldPassword,newPassword,password){
		if(newPassword!=password){
			alert("兩次密碼輸入的不一致!");
			return;
		}
		teacherService.alterPassword(oldPassword,newPassword).success(
				function(response){
					alert(response.message);
					//重新查詢 
					location.href="../logout";
		   
		     
				}
		); 
	}

修改後程式碼:

	//修改使用者密碼
	$scope.alterPassword=function(oldPassword,newPassword,password){
		if(newPassword!=password){
			alert("兩次密碼輸入的不一致!");
			return;
		}
		teacherService.alterPassword(oldPassword,newPassword).success(
				function(response){
					alert(response.message);
					//重新查詢 
		        	/*location.href="../logout";*/
		        	windows.parent.location.href="../logout";

		        	
				}
		); 
	}

修改後,index.html的(主頁面)直接跳轉至的login.html頁面

問題完美解決。

解決方法有兩個: (1)在<a> </a>標籤中跳轉,設定標籤的目標屬性為_parent;

<a target="_parent" href="../logout">安全退出</a>

(2)在js中使用window.location.href跳轉,讓父頁面跟著一起跳轉,即在window.location.href = url改為window.parent.location.href = url;(window可省略)

我根據專案採用的是第二種