BOM笔记

BOM即 浏览器对象模型(Browser Object Model)

• 窗口（Window）

  • 获取文档显示区域高度和宽度

    window.innerWidth; //文档区域宽度
    window.innerHeight; //文档区域高度
    

  • 获取外部窗体高度和宽度

    window.outerWidth;  //浏览器的宽度
    window.outerHeight; //浏览器的高度
    

  • 自动打开一个新窗口

    window.open("http://www.baidu.com/");
    

• 浏览器（Navigator）

  • 浏览器相关信息

    navigator.appName; //浏览器产品名称：Netscape
    navigator.appVersion; //浏览器版本号:5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36 Edg/88.0.705.81
    navigator.appCodeName; //浏览器内部代码：Mozilla
    navigator.platform; // 操作系统：Win32
    navigator.cookieEnabled; // 是否启动Cookies: true
    navigator.userAgent; // 用户代理头： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36 Edg/88.0.705.81
    

• 客户端屏幕（Screen）

  • 用户的屏幕大小和可用屏幕大小

    screen.height; //用户分辨率：1920*1080
    screen.availHeight; //用户可用区域大小（减去任务栏大小）：1920*1040
    

• 历史（History）

  • 返回从前的访问

    history.back(); //返回上次访问
    history.go(-2); //返回上上次访问
    

• 浏览器地址（Location）

  • 刷新页面

    location.reload(); //刷新页面
    

  • 跳转页面

    loacation.assign("http://www.baidu.com");
    

  • Location其他属性

    location.protocol; //协议：https:
    location.hostname; //主机名：i.cnblogs.com
    location.port; //端口号(默认是80，没有即表示80端口)
    location.host; //主机加端口号：i.cnblogs.com
    location.pathname; //访问路径：/posts/edit
    

• 弹窗

  • 警告框

    alert("这是一个警告框");
    

  • 确认框

    confirm("是否确定删除"); //返回值为 ture 或 false
    

  • 输入框

    prompt("请输入用户名"); //返回值为输入的用户名
    

• 计时器

  • setTimeout(function,x毫秒数);

    过了x毫秒后只执行一次function函数

  • setInterval(function,x毫秒数);

    过x毫秒后重复执行function函数 返回值为计时器号

  • clearInterval();

    停止计时器，参数为计时器号

    ---

    注：不要在执行函数里面放document.write(); 因为原理是新建文档可能会刷新掉javascript代码