浏览器中的window对象

缺乏、安全感 2023-01-01 12:59 178阅读 0赞

1.  screenLeft/screenTop；IE和Opera中表示文档区到主屏幕的距离，在Chrome,Firefox和Safari中是浏览器到主屏幕的距离 Firefox Safari和Chrome始终返回每个框架的top.screenX和top.screenY,即使在页面页面由于被设置了外边距而发生了偏移的情况下，相对于window对象使用screenX和screenY每次都会返回相同的值，IE和Opera会给出框架相对于屏幕边界的精确坐标值， 所以无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。

var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
                var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;
                console.log(leftPos, topPos);

1.  使用moveTo()和moveBy()方法可以将窗口精确的移动到一个新位置，两个参数可以接受两个参数，moveTo()接受的是新位置的x和y坐标、 moveBy()接受的是要移动的距离的x和y坐标，该方法不适用于框架，只能对最外层的window对象使用，Opera和IE7更高版本中禁用两个方法

window.moveBy(100, 100);
            window.moveTo(100, 0);

1.  浏览器窗口大小：innerWidth,innerHeight,outerWidth,outerHeight，IE9+,Firefox,OPera和Chrome均提供了该四个属性。IE9+和Safari、Firefox中outerWidth和outerHeight返回浏览器窗口本身的尺寸。Opera中这两个属性值表示单个标签页对应的浏览器窗口大小。innerWidth和innerHeight表示该容器的页面视图区大小（减去边框宽度）。Chrome中innerHeight/innerWidth/outerHeight/outerWidth都会返回相同的值 document.documentElement.clientWidth/document.documentElement.clientHeight保存了页面视口信息。IE/Opera/Firefox/Safari/Chrome均可用,IE6中标准模式下才有效，如果是混杂模式要通过document.body.clientHeight/document.body.clientWidth访问，对于混杂模式下的Chrome,无论通过document.documentElement还是document.body都可以取得页面视口大小，兼容写法

1.  resizeTo()和resizeBy()方法可以调整浏览器窗口大小，这两个方法都接收两个参数，resizeTo()接收浏览器的新高度和新宽度，resizeBy()接受新窗口与原窗口的宽度和高度只差，Opera和IE7+是默认禁用的，不适用于框架

setTimeout(function(){
                  window.resizeTo(200,200);
              },2000);
              setTimeout(function(){
                  window.resizeTo(100,200);
              },2000);

1.  导航和打开窗口：window.open()方法可以导航到特定的url,也可以打开一个新的浏览器窗口，接受4个参数，要加载的url,窗口目标，特性字符串，新页面是否取代浏览器历史记录中当前加载页面的布尔值，一般只传递一个参数，最后一个参数只在不打开新窗口的情况下使用，如果传递了第二个参数，且该参数是已有的窗口或者框架名称，则会在具有该名称的窗口或框架中来加载第一个参数指定的url,第二个参数也可以是\_blank,\_self,\_top,\_parent

var w;
    
                 setTimeout(function(){
                    w = window.open("http://www.baidu.com","_blank","height=200,width=200,top=100,left=100");
                 },2000);
                 setTimeout(function(){
                     w.resizeTo(500,500);
                     console.log(11);
                 },3000);
                 setTimeout(function(){
                     w.resizeBy(100,200);
                     console.log(11);
                 },4000);
                 setTimeout(function(){
                    w.moveBy(0, 0);
                    console.log(11);
                 },5000)
                 setTimeout(function(){
                    w.moveTo(100, 0);
                    console.log(11);
                 },6000)
                 
                //window.close()可以关闭通过window.open()打开的窗口，新创建的对象有个opener属性，保存着打开它的原始窗口对象，只在弹出窗口中的最外层window
                //对象中有定义，而且指向调用window.open()的窗口或框架，指向调用window.open()的窗口或框架，将opener属性设为null即告诉浏览器新创建的标签页
                //不需要与打开它的标签页通信，可以在独立的进程中运行。
                /*
                 由于广告问题，弹出窗口可能会被屏蔽，如果是浏览器内置的屏蔽程序阻止的弹出窗口，window.open()可能会返回null,检测这个返回的值可以确定弹出窗口
                 是否被屏蔽了，如果是浏览器扩展或其他程序阻止的弹出窗口，window.open()会抛出错误，可将其代码放入try-catch语句中
                */