js 打开页面的方法总结

文章目录

• • 前言
  • 1.window.open
  • 2.location.href / window.location.href
  • 3.location.replace
  • 4.a标签跳转

前言

本文总结 JS 打开新页面/窗口的方法

1.window.open

打开一个新的浏览器页面或者标签页,可以设置新页面的参数

window.open(url,name,specs,replace)

1. 参数1:url
   a. 必须的参数,新页面的地址
2. 参数2:name
   a. 新窗口的名称
3. 参数3:specs
   a. 新页面的参数,可以设置大小,位置,工具栏
4. 参数4:replace:Boolean
   a. true:替换当前页面
   b. false:在当前页面的基础上新页面打开
5. 参数5:opener
   a. 表示调用window.open的窗口对象,这个窗口可以通过window.opener引用调用它的窗口对象

2.location.href / window.location.href

将当前页面的地址修改新页面的地址,但是无法设置新的页面参数

location.href = url
window.location.href = url

1. location.href 是从location对象获取的属性,范围是在当前的窗口或者标签页内
2. window.location.href 是通过window对象获取location对象的属性,它的范围是整个窗口
   在函数内使用location.href,可能不会作用于全局窗口,window.location.href则始终指向全局窗口

3.location.replace

location.replace和location.href方法类似
location.replace使用时会替换到当前浏览器的窗口,新的页面会替换掉当前页面在历史记录中的位置,而不会在历史记录中创建一个新的条目,不会退后到前一个页面

location.replace(url)

4.a标签跳转

a标签的target属性可以设置链接的打开方式

<a href="window.baidu.com" target="_blank">百度</a>

a标签属性

1. target 属性
   a. target=“_blank”:在新窗口打开
   b. target=“_parent”:在父窗口打开链接
   c. target=“_self”:默认:在当前页面跳转
   d. target=“_top”:在当前窗口打开链接,并且替换当前的整个窗体(框架页)
2. download 属性
   a. download属性用于指定链接的下载行为。当download属性存在时，用户点击链接时将下载指定的文件，而不是被导航到链接的URL。
   b. download属性只适用于链接到同源的服务器上的文件,如果链接到其他源的资源,浏览器可以能会阻止下载

<a href="example.text" download>下载</a>