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