使用iframe框架后的页面，执行跳转命令，目标页面内嵌至iframe的子页面的解决方法

约定不等于承诺〃 2022-05-13 12:54 185阅读 0赞

问题描述：

在做项目的过程中，需要完成修改密码后重新登录的功能，但是前端页面使用了IFrame的框架，修改页面内嵌在的index.html中，

重新登录的页面就内嵌到原来的页面中。

问题如图所示：![70][]

修改密码成功后：

![70 1][]

出现问题，修改密码页面跳转到的登录页面内置到了子页面中

![70 2][]

登录后出现了如下页面：

![70 3][]

前端使用的是AngularJs，后台使用的springSecurity做的安全控制

原来代码：

**password.html**

**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;** ###

### **（2）在js中使用window.location.href跳转，让父页面跟着一起跳转，即在window.location.href = url改为window.parent.location.href = url;（window可省略）** ###

我根据项目采用的是第二种

[70]: /images/20220504/1fea57f28d2240b5b9a27acbaceae105.png
[70 1]: /images/20220504/6bda2139e35848caa41a1020d989275b.png
[70 2]: /images/20220504/5735fd61bd264015a15841f63c3d2aca.png
[70 3]: /images/20220504/dd70c95178774348a616eb843b7e9a05.png