3.JS( 十 ) _生活百科

12.BOM对象BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。
12.1 window对象

窗口方法
// BOM Browser object model 浏览器对象模型 // js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容. console.log( window ); // alert() 弹出一个警告框 window.alert("hello"); //confirm 弹出一个确认框,点击确认,返回true, 点击取消,返回false var ret = confirm("您确认要删除当前文件么?"); console.log( ret ); // 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null var ret = prompt("请输入一个内容","默认值"); console.log( ret ); // close() 关闭当前浏览器窗口 window.close(); //打开一个新的浏览器窗口 window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px";
定时方法 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次。
// 设置循环定时器 var ID = window.setInterval(code,millisec) // 每millisec毫秒执行一次code // 取消循环定时器 window.clearInterval(ID); // 设置单次定时器 var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次 // 取消单次定时器 window.clearTimeout(ID);

12.2 Location对象<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="func1()">查看Location对象</button> <button onclick="func2()">跳转到百度</button> <button onclick="func3()">F5</button> <script> function func1(){ console.log( location ); } // 地址栏对象控制和操作地址栏 // 所谓的地址就是当前页面所在地址 // 地址结构: // 协议://域名:端口/路径/文件名?查询字符串#锚点 console.log( `协议=>${location.protocol}` ); console.log( `端口=>${location.port}` ); console.log( `域名=>${location.hostname}` ); console.log( `域名:端口=>${location.host}` ); console.log( `路径=>${location.pathname}` ); console.log( `查询字符串=>${location.search}` ); console.log(`完整的地址信息=>${location.href}`); function func2(){ // location.href=https://www.huyubaike.com/biancheng/"http://www.baidu.com"; // 页面跳转 location.assign("http://www.baidu.com"); // 页面跳转 } function func3(){ location.reload(); // 刷新页面 } 12.3 本地存储对象使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。