javascript 页面跳转

1,451 阅读3分钟

window.open

语法:

window.open(URL,name,features,replace)

URL: 新窗口中显示的文档的 URL
name: 该字符声明了新窗口的名称。这个名称可以用作标记 a 标签 和 form标签 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。

features: 对新窗口的设置 replace: Boolean类型,在浏览历史中创建新的条目 还是 替换 , true 是替换。

features: (经测试,yes 和 1 等同, no和0等同, channelmode是否设置yes,没什么区别)

描述
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窗口的文档显示区的宽度。以像素计。
// 当前窗口新开一个窗口,全屏,左右侧、底部会有几像素的空隙,暂未找到原因
const width = window.screen.availWidth + 'px'
const height = window.screen.availHeight + 'px'
window.open(url, 'newwindow', `width=${width},height=${height}, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)

// 新窗口打开 非用户操作产生的新弹出窗口会被浏览器拦截
window.open(url, '_blank')

a 标签

属性介绍:

href: 规定链接指向的页面的 URL。

target: 规定在何处打开链接文档, target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

描述
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档。
 <a href="xxx" target="_blank">跳转新窗口</a>
 <a href="xxx" target="_self">当前页面跳转</a>

模拟用户点击,新窗口打开

为了防止浏览器拦截,模拟a标签的跳转

var aEle = document.createElement('a')
aEle.setAttribute('href', res.data)
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))

window.history.go()

语法

window.history.go(delta)

方法从会话历史记录中加载特定页面, history.go(2)向前移动两页,history.go(-2)则向后移动两页。如果未向该函数传参或delta相等于0,则该函数与调用location.reload()具有相同的效果。

window.history.back()

语法

window.history.back()

方法会在会话历史记录中向后移动一页。如果没有上一页,则此方法调用不执行任何操作。

window.location.reload()

语法

window.location.reload(forcedReload)

forcedReload: Boolean 类型, 当取值为 true 时,将强制浏览器从服务器重新获取当前页面资源,如果取值为 false 或不传该参数时,浏览器则可能会从缓存中读取当前页面。

window.location.href

当前页面打开URL页面, 会在浏览器中创建新的记录

window.location.href= xxx