js打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等

项目中一些页面，在有的时候需要在一个新窗口中打开，又不想在新窗口显示太多可操作信息，如隐藏菜单栏、工具栏、配置窗口大小、滚动条等。

先看看效果：

1、【这是没隐藏菜单栏等界面】

2、【这是隐藏菜单栏、工具栏等界面】

注：经测试大部分都功能都可配置，但隐藏地址栏无效 location=no，因为一些浏览器会强制新窗口始终渲染位置栏！

原码实列：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS打开新窗口</title>
</head><body><button type="button" id="open-btn">打开新窗口</button><script async>window.onload = function () {function open() {// 新窗口默认宽高window.open('https://cn.bing.com', "_blank", "toolbar=no,menubar=no,location=no,status=no");//  新窗口宽350，高750window.open('https://cn.bing.com', "_blank", "width=350,height=750,toolbar=no,menubar=no,location=no,status=no");// 新窗口全屏window.open('https://cn.bing.com', "_blank", 'width=' + screen.width + ', height=' + screen.height + ',top=0,left=0,toolbar=no,menubar=no,location=no,status=no,help=no,center=yes,scrollbars=yes,resizable=yes,minmizebutton=yes,maxmizebutton=yes');// 关闭原来的旧窗口window.opener = null; window.close();};let oBtn = document.querySelector('#open-btn');oBtn['onclick'] = function () {open();};};</script>
</body></html>

window.open()方法参数说明：

  let winObj = window.open(url, name, features, replace);参数1：url 【可选参数，字符串类型】要在新打开的窗口中加载的URL，如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。参数2：name 【可选参数，字符串类型】该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。参数3：features 【可选参数，字符串类型】列出新窗口的特征(大小，位置，滚动条等)，一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：height 是打开窗口的高度width 是打开窗口的宽度top 是窗口距离显示器顶端（y坐标）的像素数left 是窗口距离显示器左边（x坐标）的像素数titlebar = yes|no|1|0  设置显示标题栏，默认为 yes。toolbar = yes|no|1|0  设置是否显示工具栏，默认为 yes。location = yes|no|1|0  设置是否显示地址栏，默认为 yes。 注：经测试隐藏地址栏无效 location=no，因为一些浏览器会强制新窗口始终渲染位置栏menubar = yes|no|1|0  设置是否显示菜单栏，默认为 yes。status = yes|no|1|0  设置是否显示状态栏，默认为 yes。scrollbars = yes|no|1|0  设置是否显示滚动条，默认为 yes。resizable = yes|no|1|0  设置是否可以调整大小，默认为 yes。channelmode=yes|no|1|0    设置是否使用剧院模式显示窗口，默认为 no。directories=yes|no|1|0    设置是否添加目录按钮，默认为 yes。fullscreen=yes|no|1|0    设置是否使用全屏模式显示浏览器，默认为 no。 注：处于全屏模式的窗口必须同时处于剧院模式。参数4：replace 【可选参数，布尔值类型】true --> URL替换浏览历史中的当前条目。false --> URL在浏览历史中创建新的条目。

window.open()方法详解：

地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open

js打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等相关推荐

js页面跳转和 js打开新窗口方法
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...
JS 打开新窗口的方法
一.window.open()支持环境:JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法:window.open(pageURL,name,pa ...
js页面跳转和js打开新窗口
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...
js打开新窗口并且不被拦截
js打开新窗口并且不被拦截 window.open是javascript函数,该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口,浏览 ...
js打开新窗口的各种方法
window.top.location=url 可以在iframe中的页面在父窗口刷新打开 window.open方法可控制的样式丰富,比如我们可以控制窗口显示的大小,窗口显示的内容,以及位置等等.都 ...
js打开新窗口被拦截问题
打开新窗口的方式主要有 window.open, a标签增加target="_blank"属性,form标签增加target="_blank"属性用户直接点击 ...
点击按钮(button)打开新窗口(window)的几种情况
点击按钮(button)打开新窗口(window) 从事前端制作的朋友都有碰到过,需要点击按钮跳转到另外一个页面.只要用到简单的onclick事件就可以简单实现效果. 方式一:在原来的窗口上打开新窗口 ...
JS打开新窗口的代码window.showModalDialog()
用JS代码打开新窗口 function openNewWindow(url,width,height,formname) { var feature="dialogWidth:&qu ...
js打开新窗口时隐藏掉地址栏的解决方案
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.问题? 二.解决思路 1.修改window.open参数 2.跳转空白页,由空白页初始化时使用ajax跳转页面总 ...

js打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等

先看看效果：

注：经测试大部分都功能都可配置，但隐藏地址栏无效 location=no，因为一些浏览器会强制新窗口始终渲染位置栏！

原码实列：

window.open()方法参数说明：

window.open()方法详解：

地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open

js打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等相关推荐

最新文章

热门文章