首页 问答社区 web技术 正文

BOM中的对象

2021-02-06 16:42:25 171
爱秀

BOM

BOM(浏览器对象模型)中有很多对象，开发者可以直接使用这些对象中的方法来实现一些功能。

window对象

window是顶层对象，所有其他的对象都在它下面，包括DOM中的document，在使用时可以省略，比如：

window.alert("提示信息");
省略window.
alert("提示信息");

window是一个全局对象，另外还可以表示浏览器窗口，例如可以获取浏览器的内部净宽高

alert("width:" + window.innerWidth + ", height:" + window.innerHeight);

弹框的方法：

  • 提示框

      window.alert("提示信息");
  前面可以省略window，直接使用alert();即可

  • 确认框：

      confirm("是否删除？");
  在弹出的框中如果点击确认则返回true  如果点击取消则返回false
  var res = confirm("是否删除？");
  alert(res);
  • 输入框：
      prompt("提示信息");
  可以在弹出框中输入文本内容，如果点击确认返回输入框的文本内容，点击取消返回null
  var res =  prompt("请输入密码:");
  alert(res);

open方法：window.open("url地址");可以在新的标签页中弹出url中的网页，弹出后之前的网页还会存在。

定时器：可以让函数在指定时间后执行，只执行一次

语法：setTimeout(函数,毫秒值);
    setTimeout(
        function(){
            alert("timeout");
        },
        6000
    );

关闭定时器，可以将一个定时器关闭:clearTimeout(定时器的名称);

var timer = setTimeout(function() {
    alert("setTimeout");
}, 6000);

clearTimeout(timer);

让函数每隔一段时间执行一次

setInterval(函数,毫秒值);

关闭定时器:clearInterval(定时器的名称)

//每隔3秒执行一次
var interval = setInterval(function() {
    alert("setInterval");
}, 3000);
//关闭setInterval定时器的方法
clearInterval(interval);

location对象获取当前浏览器地址栏的url

alert(location.href);

跳转到新的url地址

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location</title>
<script type="text/javascript">
    //获取浏览器当前地址栏中的url
    //alert(location.href);
    setTimeout(function() {
        //location.href = "19-弹出框.html";
        //location.assign("http://www.qq.com");
        //replace方法跳转不产生浏览记录，所以浏览器不能后退
        location.replace("http://www.qq.com");
    }, 3000);
</script>
</head>
<body>

</body>
</html>

上面三种都可以跳转，不同的是replace跳转是不会产生浏览记录，即浏览器不能后退

history对象

现在浏览器大量使用AJAX技术，history也存在一些安全问题，所以不建议使用history对象。

    返回浏览记录的上一页：history.back();
    返回浏览记录的上一页：history.forward();
    返回浏览记录的上一页：history.go(-1);
    返回浏览记录的上一页：history.go(1);

navigator对象使用该对象中的属性可以获取浏览器的信息：

  • navigator.appName：浏览器名称；
  • navigator.appVersion：浏览器版本；
  • navigator.language：浏览器设置的语言；
  • navigator.platform：操作系统类型；

不过这些浏览器信息都可以被用户修改，所以获取到的内容不一定正确。

javascript
分享
海报
171
上一篇：javascript函数下一篇：javascript之DOM简介

相关文章

忘记密码？

图形验证码