【JS】HTML子页面与父页面相互跳转

遇到的问题

之前的项目中我在写个人资料和修改资料的时候，将子页面嵌套在父页面中，但由于先写的修改资料以及中间上传头像的页面及跳转，导致没有意识到将其嵌套在父页面中会导致跳转到的上换头像的页面也嵌套在其中，导致页面被遮挡住，如下图：

 

 这里跳转页面我是这样写的：

//上传头像
function upphoto() {
    location.href="uploadImg.html";
}

解决

改成下面这样就可以从子页面跳转到新的父页面了

 //上传头像
function upphoto() {
   parent.location.href="uploadImg.html";
}

上传完头像再跳转回编辑页面也是一样用parent

parent.history.back(-1);

整理了一下不同页面之家的跳转问题解决办法：

  //返回上一页
window.history.back(-1);

  //在本页面跳转
window.location.href
location.href

 //仅在本页面打开地址
self.location.href
this.location.href

 //是上一层frame中页面跳转
parent.location.href

 //是最外层的frame中页面跳转
top.location.href

当然如果页面当中有自定义的 frame 的话，也可以将 parent、self、top 换为自定义 frame 的名称 ，效果就是在自定义 frame 窗口打开url。

这里 window 和 self 的区别通过一个栗子来解释：

我有个页面 A.html 里面嵌套了一个 B.html，在 A 中使用 window.location 跳转就把整个页面都跳转了。而在 A 中镶嵌 B 页面的位置，使用了 self 跳转，就只是把B界面跳转了，A页面其他地方没有变化。

以上页面跳转还可以做到防止外部引用的效果，用 if (top.location == self.location) 判断当前location 是否为顶层，来禁止 frame 引用。

if(top !== self){            
　 top.location.href = location.href;
 }   //禁止frame引用

摘了个例子:
如果你的网页地址是: http://www.a.com
别人的是 http://www.b.com
他在他的页面用iframe等框架引用你的 http://www.a.com，那么你可以用:

if(top.location.href != self.location.href){
    location.href="http://www.a.com";
}

来转向你的页面,top指代的是主体窗口,这里 top.location.href 返回 http://www.b.com，
这里 http://www.b.com != http://www.a.com 返回为真(true),则网页重定向到你的网页,做到防盗用的作用。