前端页面跳转的6大类方法及其使用场景特性分析

您所在的位置：网站首页 › html点击图片跳转页面 › 前端页面跳转的6大类方法及其使用场景特性分析

前端页面跳转的6大类方法及其使用场景特性分析

2024-02-19 16:22| 来源: 网络整理| 查看: 265

前端页面跳转的方法有很多种，总有一种适合你：

a标签跳转

在当前页面打开：

跳转

在当新窗口打开，设置target属性为_blank：

跳转

适用场景：

页面中跳转固定的地址 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标签跳转

content="5;url=http://www.w3school.com.cn"中的5代表5秒，url代表跳转地址。

适用场景：

适合进入页面直接跳转，这种方式可以作为了解。

【本文地址】

前端页面跳转的6大类方法及其使用场景特性分析

前端页面跳转的6大类方法及其使用场景特性分析

今日新闻

推荐新闻