js获取屏幕的宽度高度以及window.open的用法

最新推荐文章于 2024-01-03 19:14:45 发布

dclchj

最新推荐文章于 2024-01-03 19:14:45 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转自：http://hi.baidu.com/zhuifengh2o/item/4cba119a95b69837336eebe0

 
        <script>      
       
        alert(screen.width +  
        "*"  
        + screen.height)         
       
        </script>

输出当前屏幕的宽度和高度；

 
        <SCRIPT  LANGUAGE= 
        "JavaScript" 
        >      
       
        var  
        s =  
        "网页可见区域宽："  
        + document.body.clientWidth;      
       
        s +=  
        "\r\n网页可见区域高："  
        + document.body.clientHeight;      
       
        s +=  
        "\r\n网页正文全文宽："  
        + document.body.scrollWidth;      
       
        s +=  
        "\r\n网页正文全文高："  
        + document.body.scrollHeight;      
       
        s +=  
        "\r\n网页正文部分上："  
        + window.screenTop;      
       
        s +=  
        "\r\n网页正文部分左："  
        + window.screenLeft;      
       
        s +=  
        "\r\n屏幕分辨率的高："  
        + window.screen.height;      
       
        s +=  
        "\r\n屏幕分辨率的宽："  
        + window.screen.width;      
       
        s +=  
        "\r\n屏幕可用工作区高度："  
        + window.screen.availHeight;      
       
        s +=  
        "\r\n屏幕可用工作区宽度："  
        + window.screen.availWidth;      
       
        alert(s);         
       
        </SCRIPT>

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

输出网页的各部分宽高值；

 
        <script>             
       
        window.open( 
        'Default.aspx' 
        ,  
        'newwindow' 
        ,  
        'height=500, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no' 
        )      
       
        </script>

window.open的用法：

default.aspx:要打开的页面
newwindow:窗口名称,也可以为_self,_blank等参数
height:窗口高度
width:窗口宽度
toolbar:是否显示工具栏(yes,no)
menubar:是否显示菜单栏(yes,no)
scrollbars:是否出现滚动条(yes,no)
resizable:是否可以改变窗口大小(yes,no)
location:是否显示地址栏(yes,no)
status:是否显示状态栏(yes,no)
top,left:窗口打开时的坐标；

 
        <script>     
       
        function  
        centerWindow(url, w, h) {     
       
        l = (screen.width - w) / 2     
       
        t = (screen.height - h) / 2     
       
        window.open(url,  
        '' 
        ,  
        "height="  
        + w +  
        ",width="  
        + h +  
        ",top="  
        + t +  
        ",left="  
        + l +  
        "" 
        );     
       
        }        
       
        </script>        
       
        <input  type= 
        "button"   
        onclick= 
        "centerWindow('http://www.youth21.i.sohu.com','400','400')" 
        />

打开一个新的页面居中显示；打开空白页centerwindow(’about:blank’,800,500)

 
        <SCRIPT  LANGUAGE= 
        "JavaScript" 
        >      
       
        redirectPage();      
       
        function  
        redirectPage() {      
       
        /*var  url640x480  =  "http://www.baidu.com";**记得改相应的页面*/ 
       
        var  
        url800x600 =  
        "http://www.baidu.com" 
        ;      
       
        var  
        url1024x768 =  
        "http://youth21.i.sohu.com" 
        ;      
       
        /*if  ((screen.width  ==  640)  &&  (screen.height  ==  480))         
       
        window.location.href=  url640x480;*/ 
       
        if  
        (screen.width <= 800)      
       
        window.location.href = url800x600;      
       
        else  
        if  
        ((screen.width >= 1024))      
       
        window.location.href = url1024x768;      
       
        }       
       
        </script>

根据分辨率大小或屏幕宽度打开不同的页面；

 
        空间首页 http://hi.baidu.com/zhuifengh2o  
       
        风云人物 http://hi.baidu.com/zhuifengh2o/archive/tag/hourman  
       
        计算机档 http://hi.baidu.com/zhuifengh2o/archive/tag/pc  
       
        文章 http://hi.baidu.com/zhuifengh2o/archive/tag/article  
       
        美图 http://hi.baidu.com/zhuifengh2o/archive/tag/image  
       
        视频 http://hi.baidu.com/zhuifengh2o/archive/tag/movie  
       
        游戏 http://hi.baidu.com/zhuifengh2o/archive/tag/game  
       
        网站知识 http://hi.baidu.com/zhuifengh2o/archive/tag/web  
       
        网络工程 http://hi.baidu.com/zhuifengh2o/archive/tag/network%20engineer