window新开窗口,固定大小位置

最近写三方登陆,自己搞了一个新开窗口的工具函数,有需要自取。也希望大佬,看看有没有需要改进的地方,代码如下:


/**
 * 
 * @param {String} url 需要打开的新的窗口地址
 * @param {String} win 当前父级窗口
 * @param {Object} params 新窗口的参数
 */
function newWindowPage(url, win, params = {}) {

    const name = params.name || '';
    const height = params.height || window.screen.height / 2;
    const width = params.width || window.screen.width / 2;
    const position = params.position || 'center';
    const toolbar = params.toolbar || 'no';
    const scrollbars = params.scrollbars || 'no';
    const resizable = params.resizable || 'no';
    const location = params.location || 'no';
    const slatus = params.slatus || 'no';
    const menubar = params.menubar || 'no';
    let top = params.top || null;
    let left = params.left || null;

    /**
     * params对象各个属性注释
     * @param {String} name 弹出窗口的名字(不是文件名),并不是必须的,默认为空,可选。
     * @param {Number} height 弹出窗口的高度,默认为屏幕尺寸高度的一半,可选。
     * @param {Number} width 弹出窗口的宽度,默认为屏幕尺寸宽度的一半,可选。
     * @param {String} position 弹出窗口的位置,默认为屏幕的居中显示,可选。
     * @param {String} toolbar 是否显示工具栏,yes位显示,默认为no,可选。
     * @param {String} scrollbars 是否显示滚动条,yes位显示,默认为no,可选。
     * @param {String} resizable 是否允许改变窗口大小,yes位允许,默认为no,可选。
     * @param {String} location 是否显示地址栏,yes位显示,默认为no,可选。
     * @param {String} slatus 是否显示状态栏的信息(通常是文件已经打开),yes位显示,默认为no,可选。
     * @param {String} menubar 是否显示菜单栏,yes位显示,默认为no,可选。
     * @param {Number} top 窗口距离顶部的位置,默认为null,可选。
     * @param {Number} left 窗口距离左侧的位置,默认为null,可选。
     */


    // 屏幕分辨率的高: window.screen.height
    // 屏幕分辨率的宽: window.screen.width
    const screenHeight = window.screen.height;
    const screenWidth = window.screen.width;

    const halfHeight = height / 2;
    const halfWidth = width / 2;

    const positionObj = {
        "center": {
            top: screenHeight / 2 - halfHeight,
            left: screenWidth / 2 - halfWidth
        },
        "left-top": {
            top: 0,
            left: 0
        },
        "left-center": {
            top: screenHeight / 2 - halfHeight,
            left: 0
        },
        "left-bottom": {
            top: screenHeight - height,
            left: 0
        },
        "right-top": {
            top: 0,
            left: screenWidth - width
        },
        "right-center": {
            top: screenHeight / 2 - halfHeight,
            left: screenWidth - width
        },
        "right-bottom": {
            top: screenHeight - height,
            left: screenWidth - width
        },
        "top-center": {
            top: 0,
            left: screenWidth / 2 - halfWidth
        },
        "bottom-center": {
            top: screenHeight - height,
            left: screenWidth / 2 - halfWidth
        },
        "center-top-half": {
            top: screenHeight / 8,
            left: screenWidth / 2 - halfWidth
        },
        "center-bottom-half": {
            top: screenHeight - screenHeight / 8 - height,
            left: screenWidth / 2 - halfWidth
        }
    };
    if (!top) {
        top = positionObj[position] ? positionObj[position].top : positionObj["center"].top;
    };

    if (!left) {
        left = positionObj[position] ? positionObj[position].left : positionObj["center"].left;
    };

    console.log(
        screenHeight,
        screenWidth
    );

    console.log(
        screenHeight,
        screenWidth,
        name,
        height,
        width,
        position,
        positionObj[position],
        toolbar,
        scrollbars,
        resizable,
        location,
        slatus,
        menubar,
        top,
        left,
        url
    );
   return win.open(url, name, `height=${height},width=${width},top=${top},left=${left + win.top.screenLeft},toolbar=${toolbar},scrollbars=${scrollbars},resizable=${resizable},location=${location},slatus=${slatus},menubar=${menubar}`);

};

小白的自我检讨,目前还未测试兼容性问题,欢迎大佬纠正,发现bug。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值