js弹出新窗口居中

简介: 方式1: var newUrl = //window.location=nurl; var awidth = screen.availWidth / 6 * 3; //窗口宽度,需要设置 var aheight = screen.

 

方式1:

<script language="javascript">
    var newUrl = <%=newUrl % >
    //window.location=nurl;
    var awidth = screen.availWidth / 6 * 3; //窗口宽度,需要设置
    var aheight = screen.availHeight / 5 * 2; //窗口高度,需要设置
    var atop = (screen.availHeight - aheight) / 2; //窗口顶部位置,一般不需要改
    var aleft = (screen.availWidth - awidth) / 2; //窗口放中央,一般不需要改
    var param0 = "scrollbars=0,status=0,menubar=0,resizable=2,location=0"; //新窗口的参数
    var params = "top=" + atop + ",left=" + aleft + ",width=" + awidth + ",height=" + aheight + "," + param0;
    window.close();
    window.open(newUrl, '', params); //打开新窗口
    //window.open(newUrl,'','height=0,width=0');
     
</script>

方式2:

<script language="javascript">
    var newUrl = <%=newUrl % >;
    window.close();
    var newWindow; //定义一个窗口,有利于窗口间的通讯
    makeNewWindow(newUrl);
    function makeNewWindow(url) {
        if (!newWindow || newWindow.closed) {
            var width = 400;
            var height = 300;
            var left = parseInt((screen.availWidth / 2) - (width / 2)); //屏幕居中
            var top = parseInt((screen.availHeight / 2) - (height / 2));
            var windowFeatures = "width=" + width + ",height=" + height + ",status,scrollbars=yes,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
  
            newWindow = window.open(url, "", windowFeatures);
        } else {
            newWindow.focus();
        }
    }
    //window.location=nurl;
    //window.open(newUrl,'','height=0,width=0');
      
</script>

 

<html>
    <head>
    </head>
    <body>
        <script language="javascript">
            var x = 640;
            var y = 480;
            var xx = (window.screen.width - x) / 2;
            var yy = (window.screen.height - y) / 2;
            window.resizeTo(x, y);
            window.moveTo(xx, yy);
            var newUrl =  <%=newUrl%>;
            window.close();
            var windowFeatures = "width=" + x + ",height=" + y + ",status,scrollbars=yes,resizable,left=" + xx + ",top=" + yy + "screenX=" + xx + ",screenY=" + yy;
            window.open(newUrl, "", windowFeatures);
        </script>
    </body>
</html>

参数有以下几个:

window.open 弹出新窗口的命令; 
page.html 弹出窗口的文件名; 
newwindow 弹出窗口的名字(不是文件名),非必须,可用空''代替; 
height=100 窗口高度; 
width=400 窗口宽度; 
top=0 窗口距离屏幕上方的象素值; 
left=0 窗口距离屏幕左侧的象素值; 
toolbar=no 是否显示工具栏,yes为显示; 
menubar,scrollbars 表示菜单栏和滚动栏。 
resizable=no 是否允许改变窗口大小,yes为允许; 
location=no 是否显示地址栏,yes为允许; 
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; 

 

方法3:

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>

 

目录
相关文章
|
6月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
248 1
|
5月前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM(浏览器对象模型),它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例,如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
43 5
|
5月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
|
6月前
|
JavaScript 前端开发
JavaScript 窗口
JavaScript 窗口
|
6月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
59 1
|
6月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
JavaScript 前端开发
JavaScript打开新窗口的几种方式
JavaScript打开新窗口的几种方式
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
52 0
|
前端开发 JavaScript 安全
使用原生JavaScript对网页或窗口进行截图
要使用原生 JavaScript 对整个网页或窗口进行截图,你可以使用 html2canvas 库。 html2canvas 是一个强大的 JavaScript 库,可以将网页的可见部分渲染为 <canvas> 元素,并且可以保存为图像。
540 0
|
JSON JavaScript 前端开发
JavaScript iframe 多窗口通信实战
JavaScript iframe 多窗口通信实战
120 0