JavaScript BOM

BOM（Browser Object Model）浏览器对象模型。将浏览器对象抽象成对象模型。

JavaScript中的BOM对象

• window：表示浏览器中打开的窗口
• location：表示有关当前URL的信息，用于操作浏览器的地址栏
• screen：表示客户端显示屏幕的信息
• navigator：包含浏览器的信息
• history：包含用户访问过的URL，其实就是浏览器的历史记录

window对象

所有浏览器都支持window对象，它表示整个浏览器打开的整个窗口

消息框

三种消息框：

• alert(“消息信息”);显示一个带指定信息和一个确定按钮的消息框
• confrim(“消息信息”);显示一个带有指定信息和确定、取消按钮的对话框
• promp(“提示信息”);显示一个用于用户输入信息的对话框
  • 点确定返回输入的内容，点取消返回null

<a href="https://www.baidu.com" onclick="return BdMethod()" >跳转页面</a>

<input value="提交" type="submit" onsubmit="subMethod()" >

<script>
    function BdMethod(){
        var flag = window.confirm("你确定要跳转到www.baidu.com吗？")
        return flag;
    }

    function subMethod(){
        var context = window.prompt("请输入你的名字");
        return context;
    }

    //提示用户输入信息，如果取消那么返回null
    var context = window.prompt("请输入你的名字：")
    document.write(context);
</script>

定时器

使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这就用到了计时器。

执行定时器：

• setTimeout()：在指定的毫秒数后，执行指定的代码
• setInterval()：在指定的时间间隔中不停的执行指定的代码

停止执行的定时器：

• clearTimeout(intervalVariable);停止执行setTimeout()方法的函数代码，一定要在该函数执行之前停止才有效果
• clearinterval(intervalVariable);
  • intervalVariable：就是由setInterval()返回的id值

<p id="p1"></p>
<button type="button" onclick="stopMethod();">停止！</button>
<script>
    //执行一次的定时器-->
    setTimeout(function (){
        alert("定时器任务！")
     },2000)
	//一秒执行一次，显示时间
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("p1").innerHTML=t;
    }
    //停止执行中的定时器
    function stopMethod(){
        clearInterval(myVar)
    }
</script>

window对象是BOM的核心对象，location、navigator、screen、history和window一样都是BOM提供的对象，只不过它们都以属性的形式存在于window中。（在浏览器中查看 console.log(window) 你就能大概明白了）

location对象

代表浏览器的地址栏，用于获得当前页面的地址，并把浏览器重定向到新的页面

属性：

• href：就是浏览器的地址栏，可以给浏览器设置新的地址

<a href="#" onclick="back();">百度一下</a>
<script>
    //跳转到新的页面的方法
    function back(){
        location.href="https://www.baidu.com"
    }
	//返回当前的网页的地址
    document.write(location.href);
</script>

screen对象

代表浏览器的屏幕，包含了有关浏览器屏幕的信息

        document.write("屏幕的宽度是："+screen.width)
        document.write("屏幕的高度是："+screen.height)
		document.write("可用的屏幕宽度："+screen.availWidth);
        document.write("可用的屏幕高度："+screen.availHeight);

navigator对象

代表用户浏览器的信息

    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.write(txt)

（navigator对象的信息可以被浏览器的使用者修改，所以并不能使用其来检测浏览器的版本信息）

本文地址：https://blog.csdn.net/zxy144/article/details/109566615