js window.open 打开页面并居中

1.js

  1. <script type="text/javascript">  
  2.   
  3. function openwindow(url,name,iWidth,iHeight)  
  4. {  
  5. // url 转向网页的地址  
  6. // name 网页名称,可为空  
  7. // iWidth 弹出窗口的宽度  
  8. // iHeight 弹出窗口的高度  
  9. //window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽  
  10. var iTop = (window.screen.height-30-iHeight)/2; //获得窗口的垂直位置;  
  11. var iLeft = (window.screen.width-10-iWidth)/2; //获得窗口的水平位置;  
  12. window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');  
  13. }  
  14.   
  15. </script>  





2.调用方法

  1. <a href="javascript:void(0);" onclick="javascript:openwindow('a.html','',400,200);">转到a</a>  
<think>好的,我现在需要帮助用户解决如何使用JavaScript的window.open方法让弹出窗口居中显示的问题。用户之前已经提过相关问题,现在需要更详细的步骤和示例代码。首先,我应该回顾之前的对话和提供的引用内容。用户给出的引用中,引用[2]和[3]提到了通过计算屏幕的宽度和高度来确定窗口的位置,特别是引用[2]中的代码示例,计算了iTop和iLeft的值,然后传递给window.open的参数。引用[3]则提到了设置innerHeight和innerWidth,这可能与窗口的内部尺寸有关,但需要注意不同浏览器的兼容性问题。 接下来,我需要确定如何正确计算窗口的居中位置。根据引用[2],iTop的计算是屏幕的高度减去窗口的高度,再除以2,同时可能还要考虑浏览器的工具栏或其他元素的高度。同样,iLeft是屏幕宽度减去窗口宽度,除以2。但需要注意,window.screen和window.screenX/Y的兼容性,有些浏览器可能使用不同的属性名,比如screenTop和screenLeft,或者screenY,所以代码中需要做兼容处理,比如使用逻辑或运算符来获取正确的值。然后,我需要将这些计算出的top和left值作为参数传递给window.open的窗口特性字符串。同时,用户可能希望隐藏工具栏、菜单栏等,这可以通过设置toolbar=0,menubar=no等参数来实现,如引用[2]中的示例所示。另外,引用[3]中的代码还设置了innerHeight和innerWidth,但根据MDN文档,这些特性可能不被所有浏览器支持,特别是旧版本。因此,可能需要优先使用width和height,测试不同浏览器的表现。 用户可能遇到的常见问题包括浏览器拦截弹出窗口,所以需要提醒用户确保在用户触发的操作(如点击事件)中调用window.open,否则可能被拦截。此外,不同浏览器的窗口特性支持情况不同,需要做一些兼容性说明。 现在,我需要将这些步骤整理成清晰的步骤,包括计算居中位置的方法,兼容性处理,以及如何设置窗口特性参数。同时,提供完整的示例代码,加入注释说明每个部分的作用。最后,添加注意事项,提醒用户可能的浏览器拦截和特性支持问题。还需要检查是否遗漏了用户之前的提问中的相关点,比如用户之前提到的如何隐藏工具栏和状态栏,这里在示例代码中应该包含这些参数的设置,如toolbar=no,status=no等,这样也能回答相关问题中的第二个问题。 另外,关于子窗口如何调用父窗口的方法或变量,可能需要另一个问题解答,但当前问题主要解决居中显示,所以暂时不深入,但可以在相关问题中列出,供用户后续参考。 最后,生成的相关问题需要与当前主题相关,比如如何调整窗口位置动态变化,或者处理不同屏幕分辨率的情况,以及浏览器兼容性问题,这些都是用户可能进一步想知道的内容。</think>### 如何通过 `window.open` 实现窗口居中? 通过计算屏幕尺寸和窗口尺寸的差值,可以精确控制弹出窗口的居中位置。以下是具体实现方法: --- #### **实现步骤** 1. **计算窗口位置** - 使用 `screen.width` 和 `screen.height` 获取屏幕分辨率 - 通过窗口目标尺寸计算居中坐标: $$ iLeft = \frac{\text{screen.width} - \text{窗口宽度}}{2} $$ $$ iTop = \frac{\text{screen.height} - \text{窗口高度}}{2} $$ - 兼容性处理:使用 `window.screenX` 或 `window.screenLeft` 适配不同浏览器[^2] 2. **设置窗口特性参数** 在 `window.open` 的第三个参数中指定 `width`、`height`、`left` 和 `top`,隐藏浏览器控件(如工具栏、状态栏)。 --- #### **完整示例代码** ```javascript function openCenteredWindow() { // 定义窗口尺寸 const windowWidth = 800; const windowHeight = 600; // 计算居中位置(兼容不同浏览器) const screenLeft = window.screenLeft || window.screenX || 0; const screenTop = window.screenTop || window.screenY || 0; const left = screenLeft + (window.screen.width - windowWidth) / 2; const top = screenTop + (window.screen.height - windowHeight) / 2; // 打开居中窗口隐藏浏览器控件 const newWindow = window.open( 'https://example.com', '_blank', `width=${windowWidth},height=${windowHeight},left=${left},top=${top}, toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no` ); } ``` --- #### **注意事项** 1. **浏览器拦截** 需在用户触发事件(如点击按钮)中调用,否则可能被浏览器拦截[^1]。 2. **特性兼容性** - `innerWidth` 和 `innerHeight` 可能不被旧浏览器支持,优先使用 `width` 和 `height`[^3] - 部分浏览器会强制显示状态栏,无法完全隐藏 3. **动态调整** 若需响应窗口大小变化,可通过 `window.resizeTo()` 和 `window.moveTo()` 实时调整[^2] --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值