使用iframe框架後的頁面,執行跳轉命令,目標頁面內嵌至iframe的子頁面的解決方法
阿新 • • 發佈:2018-12-17
問題描述:
在做專案的過程中,需要完成修改密碼後重新登入的功能,但是前端頁面使用了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可省略)
我根據專案採用的是第二種