| JS打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等，window.open()参数详解 | 您所在的位置：网站首页 › 行程安排app › JS打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等，window.open()参数详解 |
JS打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等，window.open()参数详解
|
项目中一些页面，在有的时候需要在一个新窗口中打开，又不想在新窗口显示太多可操作信息，如隐藏菜单栏、工具栏、配置窗口大小、滚动条等。 一、先看看效果：1、【这是没隐藏菜单栏等界面】
2、【这是隐藏菜单栏、工具栏等界面】
注意：经测试大部分都功能都可配置，但隐藏地址栏无效 location=no，因为一些浏览器会强制新窗口始终渲染位置栏！ 3、window.open()方法实列代码： JS打开新窗口（不显示菜单、工具栏等相关配置） 打开新窗口 // 打开新窗口 function open_new_win(event) { // 打开新窗口默认宽高 window.open('http://www.muguilin.com', '_blank', 'toolbar=no, menubar=no, location=no, status=no'); // 打开新窗口宽350，高750 window.open('http://www.muguilin.com', '_blank', 'width=350, height=750, top=100, left=100, toolbar=no, menubar=no, location=no, status=no'); // 打开新窗口全屏 window.open('http://www.muguilin.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(); }; // 如果 需要在打开页后，再自动打开新窗口 document.onreadystatechange = function (event) { if (document.readyState === "complete") { open_new_win(event); } };注意：window.open(strUrl, strWindowName, [strWindowFeatures], replace); 1、调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。（实际加载这个 URL 的时间推迟到当前脚本块执行结束之后。窗口的创建和相关资源的加载异步地进行）。 2、调用window.open()是打开“新窗口” 或者 是打开“新标签页”，可以配置第2个参数strWindowName 设置为_blank就可以在新的窗口中打开啦。 window.open('http://www.muguilin.com', '_blank');二、window.open()方法参数说明： // 语法格式 window.open(strUrl, strWindowName, [strWindowFeatures], replace); 参数1：strUrl【可选参数，字符串类型】要在新打开的窗口中加载的 URL 要在新打开的窗口中加载的URL，如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。 参数2：strWindowName【可选参数，字符串类型】新窗口的名称 该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 和 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，strWindowFeatures将被忽略。 参数3：strWindowFeatures【可选参数，字符串类型】 一个可选参数，列出新窗口的特征 (大小，位置，滚动条等，不在意前后顺序) 列出新窗口的特征(大小，位置，滚动条等)，一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。strWindowFeatures解释说明： 参数名值类型（Number / Boolean） 默认值功能作用top0 | 0%0新窗口距离显示器顶端（y坐标）的像素值left0 | 0%0新窗口距离显示器左边（x坐标）的像素值width0 | 0%同屏幕大小新窗口的宽度height0 | 0%同屏幕大小新窗口的高度innerWidth0 | 0%...与宽度相同，但仅支持Netscape和Mozilla浏览器。指定内容区域的宽度，即新辅助窗口的查看区域（以像素为单位）。innerWidth值包括垂直滚动条的宽度（如果存在）。如果已展开，则innerWidth值不包括侧边栏。最小要求值为100innerHeight0 | 0%...与高度相同，但仅支持Netscape和Mozilla浏览器。指定内容区域的高度，即新辅助窗口的查看区域（以像素为单位）。innerHeight值包括水平滚动条的高度（如果存在）。最小要求值为100outerWidth0 | 0%...以像素为单位指定整个浏览器窗口的宽度。此outerWidth值包括窗口垂直滚动条（如果存在）以及左右窗口大小调整边框outerHeight0 | 0%...以像素为单位指定整个浏览器窗口的高度。此outerHeight值包括任何/所有存在的工具栏、窗口水平滚动条（如果存在）以及顶部和底部窗口大小调整边框。最小要求值为100。注意：由于标题栏总是被渲染的，因此请求outerHeight=100将使浏览器窗口的innerHeight处于最小100像素以下centerscreen1 | 0 | yes | nono使窗口相对于其父级的大小和位置居中titlebar 1 | 0 | yes | noyes是否显示标题栏toolbar 1 | 0 | yes | noyes是否显示工具栏menubar 1 | 0 | yes | noyes是否显示菜单栏location 1 | 0 | yes | noyes是否显示地址栏status 1 | 0 | yes | noyes是否显示状态栏scrollbars 1 | 0 | yes | noyes是否显示滚动条resizable 1 | 0 | yes | noyes是否允许改变窗口大小directories1 | 0 | yes | noyes是否添加目录按钮（部分浏览器已废弃）fullscreen1 | 0 | yes | nono是否使用全屏模式显示浏览器， 注：处于全屏模式的窗口必须同时处于剧院模式。channelmode1 | 0 | yes | nono是否使用剧院模式显示窗口参数4：replace 【可选参数，布尔值类型】 浏览历史 true --> URL替换浏览历史中的当前条目。 false --> URL在浏览历史中创建新的条目。 三、更多window.open()相关方法说明： 地址：Window.open() - Web API 接口参考 | MDN |
【本文地址】