BOM(浏览器对象模型)
一、BOM
- 浏览器的顶级对象是window>页面的顶级对象document
- 页面中的所有内容都是属于浏览器的,页面中的内容也是window的
- window的一个特殊属性是window.name
console.log(window.name);//是空----特殊地方在于js是动态类的语言,正常结果一个是undefined
console.log(window.type);//undefined
- window等于top
console.log(top);//输出得是window对象
console.log(window);//和上面一样,是等价的
console.log(window===top);//true
二、系统对话框
<script> window.alert("哈哈");//弹出警告框,一般用于测试,用户体验不好 window.prompt("请输入内容");//用于接受用户输入的数据 window.confirm("你确认吗?");//返回值有两个true和false //这些系统对话框在不同的浏览器里呈现的样式不一样,无法统一 </script>
三、页面加载事件
<script> //1. widow.onload-------页面加载完成后才触发执行 //一般的页面加载都是从上而下,比如获取document.getElementById(),必须先有这个id才能够获取,所以必须先定义在获取 //这个方法可以把放在任何位置,因为它是页面加载完毕后才触发的 window.onload=function(){ document.getElementById("btn").onclick=function(){ console.log("sss") } } //2. window.onunload------页面关闭后触发事件 //3.window.onbeforeunload------页面关闭之前触发事件 </script>
四、location对象
<script> //属性1:window.location.hash------->#及后面的内容 //属性2:window.location.host------->主机及端口号 //属性3:window.location.hostname------->主机名 //属性4:window.location.pathname------->文件路径(相对路径) //属性5:window.location.port------->端口号 //属性6:window.location.protocl------->协议(比如http) //属性7:window.location.search------->搜索的内容 //方法1:window.location.href="网址"------>跳转页面 //方法2:window.location.assign("网址")------>跳转页面(同上) //方法3:window.location.replace("网址")----->跳转页面,没有历史记录 </script>
<input type="button" value="跳转页面1" id="btn1"> <script> document.getElementById("btn1").onclick=function(){ window.location.href="http://www.baidu.com"; }; </script> <input type="button" value="跳转页面2" id="btn2"> <script> document.getElementById("btn2").onclick=function(){ window.location.assign("http://www.baidu.com"); }; </script> <input type="button" value="跳转页面3" id="btn3"> <script> document.getElementById("btn3").onclick=function(){ window.location.replace("http://www.baidu.com"); }; </script>
五、history对象
<script> // window.history.forward()---向前跳转 // window.history.go()-----向前跳转,等同于上面 // window.history.back()----向后跳转 //注意,这几个方法都必须产生了历史记录才可以向前或向后跳转网页 </script> <input type="button" value="前进" id="btn1"> <input type="button" value="后退" id="btn2"> <script> document.getElementById("btn1").onclick=function(){ window.history.forward(); //window.history.go(); }; document.getElementById("btn2").onclick=function(){ window.history.back(); }; </script>
六、navigator对象
<script> //navigator.platform----->获取系统类型 console.log(window.navigator.platform);//Win32 //navigator.userAgent----->获取浏览器类型 console.log(window.navigator.userAgent);//Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 </script>
【转载文章务必保留出处和署名,谢谢!】