javascript:window.open 打开最大化窗口设置及详解

博客介绍了JavaScript中window.open()的使用。最初的使用方法在IE6.0全屏但无关闭按钮,在Safari中无效,给出了正确使用方法。还介绍了window.open()的基本语法和各项参数,如窗口高度、宽度、是否可调整等。
目的主要是使用javascript:window.open()对浏览器 iE6.0,7.0,8.0,chorme,safari,firefox适用


 刚开始的时候对最大化使用

 <a href="javascript:void window.open('https://www.sina. com.cn/ 

','XX','fullscreen,scrollbars,resizable=yes,toolbar=no')">Open</a> 

对IE6.0,它的效果是全屏,但是没有了关闭等等按钮,必须打开任务管理器了才能关掉,对用户很不方便。 

而对safari,根本就不起作用,还是原来的窗体大小打开。

 正确的使用方法是 

<a href="javascript:void window.open('https://www.sina.com.cn/ ','XX',' left=0,top=0,width='+

 (screen.availWidth - 10) +',height='+ (screen.availHeight-50) 

+',scrollbars,resizable=yes,toolbar=no')">Open</a>

 对这些浏览器是 OK的 

 随便添加些window.open()的介绍 

 1.基本语法 window.open(pageURL,name,parameters)

 2.各项参数 

其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。

 参数 | 取值范围 | 说明

 alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后  

alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上  

depended | yes/no | 是否和父窗口同时关闭 

directories | yes/no | Nav2和3的目录栏是否可见

 height | pixel value | 窗口高度 

hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键  

innerHeight | pixel value | 窗口中文档的像素高度

 innerWidth | pixel value | 窗口中文档的像素宽度

 location | yes/no | 位置栏是否可见 

 menubar | yes/no | 菜单栏是否可见

 outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 

 outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度  

resizable | yes/no | 窗口大小是否可调整 

screenX | pixel value | 窗口距屏幕左边界的像素长度

 screenY | pixel value | 窗口距屏幕上边界的像素长度

 scrollbars | yes/no | 窗口是否可有滚动栏 

 titlebar | yes/no | 窗口题目栏是否可见 

 toolbar | yes/no | 窗口工具栏是否可见

 Width | pixel value | 窗口的像素宽度  

z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

 status | yes/no | 窗口被激活后是否浮在其它窗口之上 



转载于:https://juejin.im/post/5d0b53b8f265da1b6029098a

<think>我们正在讨论如何使用`window.open()`打开窗口,并控制其位置、大小或设置为全屏。根据引用内容,我们可以使用`moveTo()`、`resizeTo()`方法,或者使用`fullscreen=yes`特性。 但是,引用[1]指出:在IE6以上版本中,`resizeTo()`方法不能改变使用了`fullscreen=1`设置窗口。另外,引用[2]和[4]展示了一个示例,先使用`window.open()`打开一个窗口,然后使用`moveTo(0,0)`和`resizeTo(screen.width, screen.height)`来最大化窗口。 同时,引用[3]提到可以在新窗口的`resize`事件、`open`事件或`activate`事件中设置`this.windowstate = maximized!`(这似乎是PowerBuilder的语法,不适用于JavaScript)来最大化窗口,但在JavaScript中我们通常使用`resizeTo()`或设置全屏特性。 因此,我们可以采用以下方法: 1. **使用`windowFeatures`参数设置全屏**:通过`fullscreen=yes`特性,但注意浏览器可能限制此特性(特别是现代浏览器可能不允许脚本控制全屏,除非用户触发)。 2. **使用`moveTo`和`resizeTo`方法**:在打开窗口后,立即调用这些方法调整窗口位置和大小,使其占据整个屏幕。 注意:由于浏览器的安全限制,非用户触发的窗口操作(如页面加载时自动弹出窗口)可能会被阻止。因此,这些操作最好由用户触发(例如点击按钮)。 下面分别介绍: ### 方法1:使用`fullscreen=yes`特性 在`windowFeatures`字符串中设置`fullscreen=yes`,但注意: - 现代浏览器可能不支持此特性,或者需要特定的浏览器设置。 - 即使支持,浏览器可能只允许在用户操作(如点击)后触发。 示例: ```javascript window.open( 'page.html', '_blank', 'fullscreen=yes' ); ``` ### 方法2:使用`moveTo`和`resizeTo`模拟全屏 这种方法更可靠,因为大多数浏览器允许调整由脚本打开窗口(前提是用户触发了打开操作)。 步骤: 1. 使用`window.open`打开一个新窗口,并保存其引用。 2. 使用`moveTo(0, 0)`将窗口移动到屏幕左上角。 3. 使用`resizeTo(screen.width, screen.height)`将窗口调整为屏幕大小。 注意:`screen.width`和`screen.height`表示整个屏幕的宽高。 示例代码(来自引用[2][4]): ```javascript $(".btn-click-new-window").on("click", function() { var url = "/your-page.html"; var tempwindow = window.open( url, '_blank', // 这里设置一些特性,但注意height和width我们会在后面用resizeTo设置,所以这里可以不用设置,或者设置一个初始值 'height=100, width=100, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no' ); // 移动窗口到左上角 tempwindow.moveTo(0, 0); // 调整窗口大小为整个屏幕 tempwindow.resizeTo(screen.width, screen.height); }); ``` ### 注意事项 1. **浏览器拦截**:如果`window.open`不是在用户点击事件中触发的,可能会被浏览器拦截。 2. **特性字符串**:在特性字符串中,如果设置`fullscreen=yes`,则不能同时使用`resizeTo`调整(如引用[1]所述)。所以,如果选择使用`moveTo`和`resizeTo`,就不要设置`fullscreen=yes`。 3. **现代浏览器限制**:现代浏览器(如Chrome、Firefox)可能不允许使用`resizeTo`和`moveTo`来调整主窗口或全屏,但如果是新打开窗口(非全屏模式)则可以调整。另外,有些浏览器可能要求窗口必须是由用户操作打开的,并且不能是跨域的(同源策略)。 4. **全屏API**:现代浏览器更推荐使用全屏API(如`element.requestFullscreen()`)来使页面内的某个元素全屏,但这与打开窗口不同。 ### 总结 - 如果你希望新窗口全屏,可以尝试设置`fullscreen=yes`,但注意兼容性。 - 更可靠的方式是使用`moveTo(0,0)`和`resizeTo(screen.width, screen.height)`来模拟全屏,但必须在用户操作(如点击事件)中执行。 ### 相关问题 1. 如何避免浏览器拦截`window.open()`打开窗口? 2. 使用`resizeTo`和`moveTo`方法调整窗口大小时,浏览器有哪些安全限制? 3. 除了`window.open()`,还有哪些方法可以实现全屏显示? 4. 如何检测浏览器是否支持`fullscreen`特性? 5. 使用全屏API(`requestFullscreen`)与`window.open`的全屏模式有何区别? [^1]: 引用[1]指出`resizeTo`不能改变使用`fullscreen=1`设置窗口 [^2]: 引用[2]展示了使用`moveTo`和`resizeTo`实现全屏的代码示例 [^4]: 引用[4]同样提供了类似的代码示例</think>### 在 `window.open` 新窗口中使用 `moveTo`、`resizeTo` 和全屏设置详解 #### 一、核心方法说明 1. **`moveTo(x, y)`** - 将窗口左上角移动到指定坐标 - 示例:`newWindow.moveTo(0, 0)` // 移动到屏幕左上角[^2][^4] 2. **`resizeTo(width, height)`** - 调整窗口到指定尺寸(单位:像素) - 示例:`newWindow.resizeTo(screen.width, screen.height)` // 调整为屏幕尺寸[^1][^4] 3. **全屏设置** - 特性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值