BOM浏览器对象模型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-U-Compatible" content="IE-edge"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <title>BOM浏览器对象模型</title> 8 </head> 9 <body> 10 <h1>BOM浏览器对象模型</h1> 11 <script type="text/javascript"> 12 // 1.window 13 /* 14 // 系统对话框alert confirm prompt 15 window.alert(12345); 16 var res = window.confirm("are you sure?"); 17 console.log(res); 18 var str = window.prompt("吃了没","shit?"); // 接收用户输入的值 19 console.log(str); 20 21 // 延时操作setTimeout(fun,time) 22 window.setTimeout(function () { 23 console.log(1234) 24 },2000); 25 26 // 每多少秒执行一次setInterval(fun,time) 27 window.setInterval(function () { console.log(1) },1000); 28 29 var num = 0; 30 var timer = null; 31 timer = setInterval(function () { 32 num += 1; 33 if(num > 3){ 34 clearInterval(timer); //清除定时器 35 return; // 结束函数运行 36 } 37 console.log("num:"+num); 38 },1000); 39 40 // open close 41 window.open(url="https://www.baidu.com",target="_blank"); // target 新窗口的位置， _blank _self _parent 42 window.close(); 43 */ 44 // 2.location 45 /* 46 console.log(location.host); 47 console.log(location.hostname); 48 console.log(location.port); 49 console.log(location.href); 50 console.log(location.pathname); 51 console.log(location.protocol); 52 console.log(location.search); 53 setTimeout(function () { 54 location.href = "https://www.baidu.com"; // 会有历史记录 55 // location.replace("https://www.baidu.com");// 不会有历史记录 56 // location.reload(); // 重新加载网页 57 },2000) 58 */ 59 60 // 3.window.navigator 的一些属性可以获取客户端的一些信息 61 /* 62 console.log(navigator); 63 console.log(navigator.plugins); 64 function hasPlugin(name) { 65 name = name.toLowerCase(); 66 for(var i = 0; i < navigator.plugins.length; i ++){ 67 var pluginsName = navigator.plugins[i].name.toLowerCase() 68 if(pluginsName.indexOf(name) != -1){ 69 console.log(name); 70 console.log(pluginsName); 71 return "有插件！" 72 } 73 } 74 return "没有插件！" 75 } 76 alert(hasPlugin("flash")) 77 */ 78 79 // 4.history 80 /* 81 console.log(history); 82 history.go(0); // 刷新页面 83 history.go(-1); // 后退页面 84 history.go(1); // 前进页面 85 history.back(); // 前进页面 86 */ 87 88 // 5.HTML5 存储技术 localStorage sessionStorage 89 <!--sessionStorage(临时存储) 为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载。关闭浏览器后清除。--> 90 <!--localStorage(长期存储) 与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在。--> 91 <!--存储和提取数据时，需要json格式化和解析--> 92 var person = { 93 name:"xiaogang", 94 age:18 95 }; 96 sessionStorage.setItem("personStorage",JSON.stringify(person)); 97 var getPerson = JSON.parse(sessionStorage.getItem("personStorage")); 98 console.log(getPerson); 99 //监听本地存储的变化 Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage 100 window.addEventListener('personStorage', function (e) { 101 console.log('key', e.key); 102 console.log('oldValue', e.oldValue); 103 console.log('newValue', e.newValue); 104 console.log('url', e.url); 105 }); 106 sessionStorage.removeItem("personStorage"); // 删除指定的数据 107 sessionStorage.clear(); // 删除所有的数据 108 </script> 109 </body> 110 </html>