亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

JavaScript瀏覽器之window

窗口位置

窗口相对于屏幕左边和上边的位置。

screenLeft和screenTop属性:支持的浏览器有IE、Safari、Opera和Chrome。
screenX和screenY属性:支持的浏览器有Firefox、Safari和Chrome。

使用下列代码可以跨浏览器取得窗口左边和上边的位置:

代码如下:

var leftPos = (typeof window.screenLeft == "number") ?
                  window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
                  window.screenTop:window.screenY;

注意:

由于浏览器之间的差异,所以无法在跨浏览器的条件下取得窗口位置的精确坐标值。

窗口大小

要取得浏览器窗口本身的尺寸非常困难,但却可以跨浏览器取得页面视口的大小。

代码如下:

var pageWidth = window.innerWidth,
    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;
    }
}

*document.compatMode属性用来确定页面是否处于标准模式。


window.open()方法

window.open(URL,name,specs,replace)

这个方法可以接收4个参数:
1、URL:打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口。
2、name:已有窗口或框架的名称或指定target属性。
target="_blank" : URL加载到一个新的窗口(默认)
target="_parent ": URL加载到父框架
target="_self " :URL替换当前页面
target="_top":URL替换任何可加载的框架集
3、specs:第三个参数是一个以逗号分隔的字符串。如果给window.open()传递的第二个参数并不是一个已经存在的窗口或框架,那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数,那么就会打开一个带有全部默认设置(工具栏、地址栏和状态栏等)的新浏览器窗口(或者打开一个新标签页——根据浏览器设置)。在不打开新窗口的情况下,会忽略第三个参数。
height:窗口的高度。最小值为100
width:窗口的宽度。最小值为100
left:窗口左侧位置。不能是负值
top:窗口顶部位置。不能是负值
location(yes || no): 是否显示地址字段
menubar(yes || no): 是否显示菜单栏
resizable(yes || no): 是否可调整窗口大小
scrollbars(yes || no):是否显示滚动条
status(yes || no):是否要添加一个状态栏
toolbar(yes || no):是否显示浏览器工具栏
4、replace:装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。
true:URL 替换浏览历史中的当前条目
false : URL 在浏览历史中创建新的条目

测试代码:

setTimeout(function(){
    window.open("https://www.baidu.com/","_blank","width=400,height=400,left=50,top=50");
},2000)

window.open()方法会返回一个指向新窗口的引用。通过这个返回对象就可以操作新打开的窗口。
closed属性:返回布尔值,弹出窗口是否关闭
opener属性:指向打开新窗口的原始窗口对象
moveTo()方法:移动窗口位置
resizeTo()方法:调整窗口大小
close()方法:关闭新打开的窗口

例子:

var newWindow=window.open("https://www.baidu.com/","_blank","width=400,height=400");
newWindow.moveTo(200,200);
newWindow.resizeTo(200,200);
setTimeout(function(){
    newWindow.close();
    alert(newWindow.closed);
},2000)

大多数浏览器都内置有弹出窗口屏蔽程序,因此需要准确地检测出弹出窗口是否被屏蔽。

代码如下:

bool = false;
try { 
    var newWin = window.open("https://www.baidu.com/", "_blank");
    if (newWin == null){
        bool = true; 
    }
} catch (ex){ 
    bool = true; 
} 
if (bool){ 
    alert("Shielded new window!"); 
}

文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
1.4萬
獲贊與收藏
861

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消