BOM:窗口位置、页面视口大小、window.open

  1. 获取窗口位置:
// 兼容所有浏览器的写法
 var leftPos = (typeof window.screenLeft === "number") ? window.screenLeft : window.screenX;
  var topPos = (typeof window.screenTop === "number") ? window.screenTop : window.screenY;
  console.log("leftPos:",leftPos,",topPos:",topPos);

2.获取页面视口大小:
因为存在浏览器兼容性问题,故获取浏览器窗口的大小做不到。现做获取页面视口大小的方法:

var pageWidth = window.innerWidth;
    var pageHeight = window.innerHeight;
    if (typeof pageWidth !== "number") {
        if (document.compatMode === "CSS1Compat") { // 标准模式
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else { // 兼容模式
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }

调整浏览器窗口的大小(注意:浏览器默认关闭此功能):

 window.resizeTo(100, 100);
    window.resizeBy(100, 100);

3.window.open
3.1.方法介绍:返回一个指向新窗口的引用,一共接受四个参数:要加载的URL,窗口目标(或者叫窗口名称),一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。一般传递第一个参数即可。但是,第二个参数在实际使用中很有用,因为若传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或者框架中加载第一个参数指定的URL,而不会重新打开一个窗口。若第二个参数并不是一个已经存在的窗口或框架,那么该方法就会根据第三个参数的字符串创建一个新窗口或新标签页。第四个参数只在不打开新窗口的情况下使用。

var newWin = window.open("https://www.hao123.com/", "topFrame1", "height=200,width=400,left=200,top=100,location=no,menubar=yes,resizable=no,scroolbars=no,status=no,toolbar=yes");
    setTimeout(function() {
        console.log("opener:",newWin.opener === window);
        console.log("newWin:",newWin);
        newWin.close(); // 关闭后指向新窗口的引用依然存在
        console.log("newWin:",newWin);
        console.log("opener:",newWin.opener === window); // .opener属性指向谁(指父窗口)打开的新窗口
        //alert(newWin.closed);
        newWin.opener = null; // 当父窗口和子窗口间不需要进行通信时,可以进行这样的设置, 以前窗口间属于非独立进程,现在增加了此项设置后,属于独立进程,并且一旦设置不可逆
    }, 2000);

3.2.检测弹出窗口是否被屏蔽

var blockedFlag = false;
    try {
        var newWin = window.open("http://www.baidu.com");
        if (!newWin) {
            blockedFlag = true;
        }
    } catch (ex) {
        blockedFlag = true;
    }
    if (blockedFlag) {
        alert("阻止了弹框!");
    }

解释:窗口是否被屏蔽(分为浏览器内置的屏蔽程序阻止弹框;浏览器扩展或其他程序阻止的弹窗),若是浏览器内置的屏蔽程序阻止弹框,只需要根据window.open返回的引用是否为null或者为undefined即可检测,若是其他程序阻止的,window.open则会报错,此时用try catch捕获(try catch:程序出错,又想让程序继续往下执行)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值