地址栏url是我们前端的重要组成部分,我们需要用到它进行页面跳转,页面传参。像我就经常用到地址栏传参的方法,但却很少用到修改地址栏的方法,近期就用到了这个修改地址栏参数的需求,发现意外的好用,于是今天就来总结一下地址栏的相关操作。
在工作中,我们经常会使用js来控制页面的跳转,那你都知道有哪些跳转的方法呢?一起来看一下吧。
window.location
包含了所有地址栏相关的参数,我们可以直接打印一下。
console.log(window.location)
我们可以采取直接给window.location
赋值一个地址的方法进行跳转,
window.location = 'https://www.baidu.com'
记得如果是跳转到域名的话,需要加上前缀哦。
从打印信息里面我们可以看到,window.location
下面有一个属性href
记录了我们的地址信息,所以我们也可以给这个属性赋值,从而达到跳转页面的目的。
window.location.href = 'https://www.baidu.com'
window.location.replace
同样用于‘跳转’一个新的页面,准确的说,是将本页面替换到新的页面,例如你先进入a页面,之后跳转到b页面,又在b页面用本方法替换到c页面,这时你在c页面点击返回按钮将直接返回至a页面,无法返回至b页面,感兴趣的话就自己试一下吧。
window.location.replace('https://www.baidu.com')
window.location.reload()
方法可以跳转到本页面,其实也就是刷新的意思,重新加载。
看到history
,大家可能就想到了,这一方法和历史记录有关。浏览器的每个窗口都会有一个页面浏览记录的序列,我们每跳转一个页面,他就会在这个序列中增加一个页面,window.history.go()
方法就是用来帮助我们在这个序列中进行跳转的。它接收一个参数,可以是正数,也可以是负数,但必须是整数。正数代表往前跳转,负数代表往后跳转。当然,使用window.location.replace()
方法替换掉的页面,不会出现在这个序列里,这代表着一旦我们替换掉这个页面,我们将无法通过js再跳转回这个页面,除非你知道准确的url。
window.history.go(-1)
我曾经记得history对象缓存url记录是有上限的,但是忘了是多少个,搜也没搜到,知道的朋友可以留言说一下。
window.open()
方法和它的名字一样,打开一个新的页面,注意,是打开,而不是跳转,使用此方法,将会直接打开一个新的窗口。他可以接收四个参数
window.open(URL,name,features,replace)
参数 | 描述 |
---|---|
URL | 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。 |
name | 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 和 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。 |
features | 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在窗口特征这个表格中,我们对该字符串的格式进行了详细的说明。 |
replace | 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:- true - URL 替换浏览历史中的当前条目。- false - URL 在浏览历史中创建新的条目。 |
features 窗口特征
channelmode=yes|no|1|0 | 是否使用剧院模式显示窗口。默认为 no。 |
---|---|
directories=yes|no|1|0 | 是否添加目录按钮。默认为 yes。 |
fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 |
height=pixels | 窗口文档显示区的高度。以像素计。 |
left=pixels | 窗口的 x 坐标。以像素计。 |
location=yes|no|1|0 | 是否显示地址字段。默认是 yes。 |
menubar=yes|no|1|0 | 是否显示菜单栏。默认是 yes。 |
resizable=yes|no|1|0 | 窗口是否可调节尺寸。默认是 yes。 |
scrollbars=yes|no|1|0 | 是否显示滚动条。默认是 yes。 |
status=yes|no|1|0 | 是否添加状态栏。默认是 yes。 |
titlebar=yes|no|1|0 | 是否显示标题栏。默认是 yes。 |
toolbar=yes|no|1|0 | 是否显示浏览器的工具栏。默认是 yes。 |
top=pixels | 窗口的 y 坐标。 |
width=pixels | 窗口的文档显示区的宽度。以像素计。 |