前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >6个打开链接地址的方式

6个打开链接地址的方式

作者头像
老K博客
发布2024-10-14 09:21:35
发布2024-10-14 09:21:35
33800
代码可运行
举报
文章被收录于专栏:老K博客老K博客
运行总次数:0
代码可运行

今天分享 6 个链接地址打开的方式,比较基础的内容,但是可以拓展一下 js 的知识面。 1、window.location.href 这应该是最常用的方式了,可以将当前页面跳转到指定的链接,适合普通的页面跳转。

代码语言:javascript
代码运行次数:0
复制
window.location.href = 'https://laokbk.cn/';

2、window.open() 这个方法可以在新窗口或新标签页中打开一个链接。

代码语言:javascript
代码运行次数:0
复制
window.open('https://laokbk.cn/category/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/', '_blank'); // 在新标签页中打开

3、document.location.assign() 与 window.location.href 类似,它会将当前页面替换为新的页面。

代码语言:javascript
代码运行次数:0
复制
document.location.assign('https://laokbk.cn/category/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/')

4、document.location.replace() 与 window.location.href 类似,但 replace() 不会保留浏览器历史记录,因此无法返回到前一个页面。

代码语言:javascript
代码运行次数:0
复制
document.location.replace('https://laokbk.cn/category/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/')

5、通过 标签的 click 事件 通过 JavaScript 模拟点击 标签,从而实现跳转,非常灵活的一种方式。

代码语言:javascript
代码运行次数:0
复制
const link = document.createElement('a');
link.href = 'https://laokbk.cn/category/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/';
link.target = '_blank'; // 在新标签页中打开
link.click(); // 触发点击事件

6、window.history.pushState() 用于修改浏览器历史记录,不会实际进行页面跳转,但可以改变地址栏 URL。适用于单页应用程序 (SPA),这也是像 vue-router 这样的路由库的底层跳转原理。

代码语言:javascript
代码运行次数:0
复制
window.history.pushState({}, '', '/new-url')

本文共 241 个字数,平均阅读时长 ≈ 1分钟

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024年10月13日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档