JavaScript高级__4 Bom对象

最新推荐文章于 2023-05-30 14:19:09 发布

slom_fxt

最新推荐文章于 2023-05-30 14:19:09 发布

阅读量98

点赞数

分类专栏： JavaScript高级文章标签： javascript

本文链接：https://blog.csdn.net/slom_fxt/article/details/120707202

版权

JavaScript高级专栏收录该内容

9 篇文章 1 订阅

订阅专栏

浏览器对象模型--Browser ObjectModel (BOM)

一、Window属性

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>window属性</title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            //BOM对象
            //Browser Object Model (BOM)---浏览器对象模型
            //BOM对象--->window对象
            //widow对象属性
            //浏览器串口的尺寸【不包括工具栏和轮动条】
            //对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari
            //widow。innerHeight--浏览器串口欧的内部高度
            //window.innerWidth--浏览器窗口的内部宽度
            /*window.onload=function(){
                var h=window.innerHeight;
                var w=window.innerWidth;
                document.write("<h4>"+w+"x"+h+"</h4>");
            };*/  //1280x577
            //对于Internet Explorer 8、7、6、5：
            //document.documentElement.ClientHeight
            //document.documentElement.Clientwidth
            //或者
            //document.body.clientHeight
            //document.body.clientWidth
            /*window.onload=function(){
                //var w=document.documentElement.clientWidth;
                //var h=document.documentElement.clientHeight;
                var w=document.body.clientWidth;
                var h=document.body.clientHeight;
                document.write("<h1>"+w+"x"+h+"</h1>");
            }*/
            //实用的 JavaScript 方案（涵盖所有浏览器）：
            window.onload=function(){
                var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                document.write("<h1>"+w+"x"+h+"</h1>");
            }
        </script>
    </body>
</html>

二、window对象的方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

格式:window.open(URL,name,features,replace)

URL

一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name

一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。

features

一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。

replace

一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。

close() 方法用于关闭浏览器窗口。

说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>window对象的方法</title>
        <script>
            //BOM对象
            //Browser Object Model (BOM)---浏览器对象模型
            //window对象的方法---全局方法
            //1.open()---打开一个新窗口
            //1.1 URL--可选的字符串，在新窗口中显示的文档的URL
            //1.2 name---可选的字符串，新窗口的名称
            //1.3 feature---可选的字符串，新窗口要显示的标准浏览器的特征
            //1.4 replace---可选的布尔值
                    /* true--URL-- 替换浏览历史的当前条目
                       false--  URL--在浏览器中创建新的条目
                    */
            function testopen(){
                //window.open("open.html","open","width=400,height=400",true)
                window.open("http://www.baidu.com/","百度","width=400,height=400",true)
            }
            //close()---关闭当前的窗口
            /*function testclose(){
                window.close()
            }*/

            //2.弹出框方法
            //警告框window.alert("sometext");
            //确认框：window.confirm("sometext");
              //1.有一个boolean返回值
                  //true---你点击确定
                  //false--你点击取消
            function testclose(){
                var res = window.confirm("确定关闭当前页面吗？")
                if(res==true){
                    window.close();
                }
            }
            //提示框：window.prompt("sometext","defaultvalue");
            //sometext---字符串，提示信息
            //defaultvalue---字符串，默认值
            //返回值:1.点击确认，那么返回值为输入的值
            //       2.点击取消，那么返回值为 null
            function testPrompt(){
                var usename= window.prompt("请输入用户名:","admin");
                if(usename==null){
                    alert("取消");
                }else{
                    alert("确认"+usename);
                }
            }

            //猜数字游戏
            var number=Number.parseInt(Math.random()*100);
            number=number+1;
            function caiNumber(){
                var num = window.prompt("请输入一个1~100的数字：","0");
                if(num>number){
                    alert("输入大了！")
                }else if(num<number){
                    alert("输入小了！")
                }else if(num==number){
                    alert("game over!")
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="open" onclick="testopen()"/>
        <input type="button" value="close" onclick="testclose()"/>
        <input type="button" value="提示框" onclick="testPrompt()"/>
        <input type="button" value="猜数字" onclick="caiNumber()"/>
    </body>
</html>

三、Window子对象

1.window Screen--屏幕

window.screen 对象包含有关用户屏幕的信息。

总宽度和总高度 --- screen.width   / screen.height
可用宽度和可用高度----screen.availWidth  / screen.availHeight
色彩深度----screen.colorDepth
色彩分辨率----screen.pixelDepth

2.window Location---页面的地址 (URL)

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

       1.location.href 属性返回当前页面的 URL。

       2.location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

3.window History---历史对象

       1.history.back() - 与在浏览器点击后退按钮相同

       2.history.forward() - 与在浏览器中点击按钮向前相同

4.window Navigator--浏览器的信息

window.navigator 对象包含有关访问者浏览器的信息。

1.例如：window.screen. xxx

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>window screen--屏幕</title>
        <script>
            //window screen--屏幕
            //1.总宽度和总高度  --- screen.width   /  screen.height
            //2.可用宽度和可用高度----screen.availWidth  / screen.availHeight
            //3.色彩深度----screen.colorDepth
            //4.色彩分辨率----screen.pixelDepth
            window.onload=function(){
                //总宽度和总高度
                var wid=window.screen.width;
                var hei=window.screen.height;
                document.write("<h2>总宽度和总高度=="+wid+"*"+hei+"</h2>");
                //可用宽度和可用高度
                var availWidth=window.screen.availWidth;
                var availHeight=window.screen.availHeight;
                document.write("<h2>可用宽度和可用高度=="+availWidth+"*"+availHeight+"</h2>");
                //色彩深度
                var colorDepth=window.screen.colorDepth;
                document.write("<h2>色彩深度=="+colorDepth+"</h2>");
                //色彩分辨率
                var pixelDepth=window.screen.pixelDepth;
                document.write("<h2>色彩分辨率=="+pixelDepth+"</h2>");
            }
        </script>
    </head>
    <body>
       
    </body>
</html>

2.例如：window Location.xxx

创建用户登录的信息界面test4.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>widow对象的子对象-widow.Location.xxx</title>
        <script>
           //window Location---页面的地址 (URL)
           //location.href 属性返回当前页面的 URL。[跳转]
           //location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
           //url---http://127.0.0.1:8080/login?username=zhangsan&password=123456
           //location.search----?username=zhangsan&password=123456
            function login(){
                var username=document.getElementById("inp1").value;
                var pass=document.getElementById("inp2").value;
                if(username=="fxt"&&pass=="123456"){
                    window.location.href="login.html?username="+username+"&passworld="+pass;
                }
            }
           
        </script>
    </head>
    <body>
        <table border="1px">
            <tr align="center">
                <td><h4>用户登录</h4></td>
            </tr>
            <tr align="center">
                <td>
                    <input id="inp1" type="text" placeholder="请输入用户名">
                </td>
            </tr>
            <tr align="center">
                <td>
                    <input id="inp2" type="password" value=""/>
                </td>
            </tr>
            <tr align="center">
                <td>
                    <input id="but" type="button" value="登录" onclick="login()"/>
                </td>
            </tr>
        </table>
    </body>
</html>

创建login.html，当用户登录时链接登录界面并将用户名返回到HTML页面中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>widow对象的子对象-widow.Location.xxx</title>
        <script>
            window.onload=function(){
                //得到URL的search值
                var str= window.location.search;//?username=fxt&password=123456
                var str1= str.split("&")//用&将得到的string分割成一个字符串数组
                //alert(str1[0])//?username=fxt
                //继续将得到的str1中的[0]数值拆分
                var name=str1[0].split("=");
                //alert(name[1]);//fxt
                //得到第一个span的dom对象
               var hdom=document.getElementsByTagName("span")[0];
               hdom.innerHTML=name[1];
            }
        </script>
    </head>
    <body>
       <h2>欢迎<span>您</span>登录界面</h2>
    </body>
</html>

3.例如：window History---历史对象

创建三个页面进行跳转

test5.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //window History---历史对象
            //history.back() - 与在浏览器点击后退按钮相同【上一个】
            //history.forward() - 与在浏览器中点击按钮向前相同【下一个】
            function toNext(){
                window.history.forward();
            }
        </script>
    </head>
    <body>
        <h1>第一个测试页面</h1>
		<a href="test5-2.html">连接到第二个测试页面</a><br>
		<input type="button" value="前进" onclick="toNext();"/>
    </body>
</html>

test5-2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function toNext(){
                window.history.forward();
            }
            function toback(){
                window.history.back();
            }
        </script>
    </head>
    <body>
        <h1>第二个测试页面</h1>
		<a href="test5-3.html">连接到第二个测试页面</a><br>
		<input type="button" value="前进" onclick="toNext();"/>
        <input type="button" value="后退" onclick="toback();"/>
    </body>
</html>

test5-3.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function toback(){
                window.history.back();
            }
        </script>
    </head>
    <body>
        <h1>第三个测试页面</h1>
		<h5>连接到第二个测试页面</h5>
        <input type="button" value="后退" onclick="toback();"/>
    </body>
</html>

4.例如：window Navigator--浏览器的信息

document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>");

document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>");

document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>");

document.write("<h1>启用Cookies:"+window.navigator.cookieEnabled+"</h1>");

document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>");

document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>");

document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");

五、 JavaScript 计时事件

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

etInterval() - 间隔指定的毫秒数不停地执行指定的代码。

/clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //JavaScript 计时事件
           //在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
           //setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
           //clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。
            window.onload=function(){
                var returnValue;
                document.getElementById("btu1").onclick=function(){
                    function getdate(){
                        var date1 = new Date();
                        var datetime=date1.getFullYear()+"年"+
                          (date1.getMonth()+1)+"月"+
                          date1.getDate()+"日 "+
                          date1.getHours()+":"+date1.getMinutes()+":"+date1.getSeconds();
                          document.getElementsByTagName("h3")[0].innerText=datetime
                    }
                    returnValue= window.setInterval(function(){getdate();},1000);
                }

                document.getElementById("btu2").onclick=function(){
                    window.clearInterval(returnValue);
                }
            }
        </script>
    </head>
    <body>
        <input id="btu1" type="button" value="开始计时"/>
        <input id="btu2" type="button" value="停止计时"/>
        <h3></h3>
    </body>
</html>