[JS] HTML child page and parent page jump to each other

problems encountered

In the previous project, when I was writing personal data and modifying data, I nested the subpage in the parent page, but because of the modification data I wrote first and the page where the avatar was uploaded in the middle and the jump, I didn’t realize it was nested In the parent page, the page that changes the avatar that will lead to the jump is also nested in it, causing the page to be blocked, as shown in the following figure:

 

 Here is the jump page I wrote like this:

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

solve

Change it to the following so that you can jump from the child page to the new parent page

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

After uploading the avatar and then jumping back to the editing page, use parent

parent.history.back(-1);

Sort out the solutions to the jumping problems of different pages:

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

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

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

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

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

Of course, if there is a custom frame in the page, you can also replace parent, self, and top with the name of the custom frame, and the effect is to open the url in the custom frame window.

Here the difference between window and self is explained by a chestnut:

I have a page A.html with a B.html nested inside, and using window.location in A will redirect the entire page. In the position where the B page is embedded in A, using the self jump, it just jumps the B interface, and the rest of the A page remains unchanged.

The above page jump can also achieve the effect of preventing external references. Use  if (top.location == self.location) to judge whether the current location is the top level to prohibit  frame  references.

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

Take an example:
If your web page address is: http://www.a.com
Others are http://www.b.com
He uses iframe and other frames to quote your http://www on his page .a.com, then you can use:

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

To turn to your page, top refers to the main window, here top.location.href returns http://www.b.com,
here http://www.b.com != http://www.a .com returns true (true), then the webpage redirects to your webpage, so as to prevent theft.