前端页面跳转的6大类方法及其使用场景特性分析
前端页面跳转的方法有很多种，总有一种适合你：
a标签跳转
在当前页面打开：
<a href="https://www.baidu.com">跳转</a>
在当新窗口打开，设置target属性为_blank：
<a href="https://www.baidu.com" target="_blank">跳转</a>
适用场景：
- 页面中跳转固定的地址
js中模拟a标签跳转
function imitateClick(url){
let aEle = document.createElement("a");
aEle.setAttribute("href", url);
aEle.setAttribute("target", "_blank");
aEle.setAttribute("id", "previewJumpEle");
// 防止重复添加
if (!document.getElementById("previewJumpEle")) {
document.body.appendChild(aEle);
}
// 模拟点击
aEle.click();
(aEle.remove && aEle.remove()) || (aEle.removeNode && aEle.removeNode(true));
};
imitateClick('https://www.baidu.com');
适用场景：
- js中直接做无感跳转，但是此方法有个弊端：经过验证，有的浏览器可能会拦截，慎用。
js中window对象location属性跳转
window.location.href = 'https://www.baidu.com';
top.window.location.href = 'https://www.baidu.com';
适用场景：
- window.location.href是覆盖当前页面跳转，在iframe嵌套内页跳转只能改变iframe的src。
- top.window.location.href是覆盖顶层地址跳转，在iframe嵌套内页跳转可以覆盖顶层地址打开新页面，且浏览器无拦截。
js中window对象的open方法跳转
新窗口打开一个链接：
window.open('https://www.baidu.com');
打开一个新的空白窗口（类似弹窗），并指定一些窗口特征，查看更多属性:
window.open('https://m.book118.com','','left=200,top=200,width=200,height=100');
适用场景：
- window.open与top.window.open效果是一样的，都是新窗口打开页面；
- window.open指定窗口特征，可当弹窗使用。
- window.open在iframe中使用会被浏览器拦截。
重定向跳转
当前页面地址重定向：
window.location.replace('https://www.baidu.com');
顶层地址重定向：
top.window.location.replace('https://www.baidu.com');
适用场景：
- window.location.replace()在iframe中使用只是重定向src地址。
- top.window.location.replace()使用效果和top.window.location.href效果一样，可以在iframe中使用，且浏览器无拦截。
meta标签跳转
<meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn">
content="5;url=http://www.w3school.com.cn"中的5代表5秒，url代表跳转地址。
适用场景：
- 适合进入页面直接跳转，这种方式可以作为了解。