在前端页面中，改变如下几个变量的值：
self.location.href;
window.location.href;
this.location.href;
location.href;
parent.location.href;
top.location.href;
都可以实现页面跳转。
但是，改变这几个值达到的页面跳转效果，还是有区别的。下面通过例子说明。
在同一个目录下，新建如下几个html文件。
(1) Top.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>This is the Top.html</title>
</head>
<body>
<h2>Top.html</h2>
<iframe src="Parent.html" width="1000" height="600"></iframe>
</body>
</html>
(2) Parent.html
<html>
<head>
<title>This is the Parent.html</title>
</head>
<body>
<h2>Parent.html</h2>
<iframe src="Test.html" width="1000" height="600"></iframe>
</body>
</html>
(3) Test.html
<html>
<head>
<title>This is the Test.html</title>
</head>
<body>
<h2>Test.html</h2>
<input type='button' onclick='self.location.href="http://www.baidu.com";' value='跳转(self.location.href)'/><br/>
<input type='button' onclick='window.location.href="http://www.baidu.com";' value='跳转(window.location.href)'/><br/>
<input type='button' onclick='this.location.href="http://www.baidu.com";' value='跳转(this.location.href)'/><br/>
<input type='button' onclick='location.href="http://www.baidu.com";' value='跳转(location.href)'/><br/>
<input type='button' onclick='parent.location.href="http://www.baidu.com";' value='跳转(parent.location.href)'/><br/>
<input type='button' onclick='top.location.href="http://www.baidu.com";' value='跳转(top.location.href;)'/><br/>
</body>
</html>
在浏览器中打开Top.html，效果如下：
Top.html
点击前面四个按钮可以看到如下效果。
iframe内部刷新效果
PS: 第三个按钮挑转(this.location.href)这种挑转方式，在我的macos系统chrome浏览器上不起作用。
点击第5个按钮挑转(parent.location.href)，可以看到如下效果，也就是父页面被刷新。
父页面刷新效果
点击第6个按钮挑转(top.location.href)，可以看到如下效果，也就是浏览器标签页中的整个页面被刷新。
整个页面全部刷新效果
到这里，这几个挑转的区别已经很清楚了。
PS: 在试验的时候，点击一个按钮之后，直接点击浏览器的上一页功能，即可将iframe页面中刷新的内容，回退到上一个页面。也就是说，浏览器的回退，应该不是针对整个页面的，应该只是针对一个iframe来做的回退到上一个页面。
参考资料：
详解location.href几种用法的区别
网友评论