js跳转网址
写js跳转,跳转最直接的网址方式就是 window.location.href = "https://example.com"。这行代码扔到浏览器控制台里,跳转页面立马就跑了。网址但你要是跳转以为所有跳转都这么简单,那可真小看这行了。网址
我去年给一个老项目加统计代码,跳转发现页面里塞了三个跳转函数。网址第一个是跳转onclick里直接写,第二个是网址setTimeout包着的延迟跳转,第三个是跳转form提交前的window.open。三个方法各管一摊,网址乱得跟早高峰的跳转地铁换乘站似的。后来我全改成统一的网址跳转工具函数,才消停。跳转
跳转这事,关键不在怎么写,而在什么时候写。用户点按钮,你得先存数据再跳——直接改href就完了。但要是跳转前需要确认表单、弹个广告、或者记录来源渠道,那就得用event.preventDefault()拦一下,干完活再手动跳。有个同事写过这么一段:
document.getElementById('btn').addEventListener('click', function(e) {
e.preventDefault();
if (trackUser()) {
window.location.replace('/next-page');
}
});
他特意用replace()而不是href赋值,因为replace不会在浏览器历史里留记录。用户按后退键时不会回到那个已经没用的中间页。这个细节,很多新手压根没想过。
还有种常见坑——新窗口打开。用window.open(url, '_blank')没问题,但会被弹窗拦截器挡。用户没点按钮时,代码里直接open,浏览器大概率拦你。所以正规做法是:先用用户点击事件里open一个空白窗口,再在回调里给它设置url。比如下载文件时,先var w = window.open();,等ajax返回文件地址,再w.location = url。这样既不被拦,又能拿到下载进度。
SPA应用里跳转更讲究。Vue用router.push,React用useNavigate,但你要是直接改window.location,整个应用会刷新,状态全没了。有次我调试一个React项目,页面跳转后redux里的用户信息丢了,排查半天,结果发现是某个遗留的标签没加onClick阻止默认行为,浏览器直接整页刷新了。后来统一封装了一个跳转方法,内部判断是站内路由还是外部链接,站内走history,站外才用location.href。
说到性能,跳转也有讲究。大量页面跳转时,别用window.location.assign()和href赋值混着来。两者行为略有差异,assign会保留当前页在历史记录里,href赋值其实和assign一样。但直接写location = url是简写,可读性差。团队协作时,最好定个规矩——统一用window.location.href = url,因为最直观,别人一眼看得懂。
最后说个冷门的——跳转前能不能取消?window.onbeforeunload可以弹个确认框,但Chrome现在对自定义文案限制很严,只能显示默认提示。你要是想拦截“页面即将离开”的误操作,得在beforeunload里e.preventDefault(),然后e.returnValue = ''。但注意,这个事件只在用户主动刷新或关闭标签时触发,js代码里改location不一定能拦住。所以别指望它能当跳转拦截器用。
写跳转这么多年,我最大的体会是:代码三行写完,但前后端的配合、浏览器的行为差异、用户的操作习惯,全藏在这三行后面。下次你再写location.href时,多想想——这个跳转真的需要吗?用户会被带到哪?他还能回来吗?