JavaScript中BOM的基础知识总结

时间:2022-01-14 16:15:27
一、什么是BOM
     BOM(Browser Object Model)即浏览器对象模型。
     BOM提供了独立于内容 而与浏览器窗口进行交互的对象;
     由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;
     BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;
     BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
 
 
下面我是总结的一些基础知识,希望能够多多交流
         //1.系统对话框
//alert() confirm() prompt()
// alert(123);
// confirm(456);//用户点击确定返回true 否则返回false
//
// prompt(789);//弹出一个让用户输入数据的对话框
//没有输入返回空 点击取消返回null
//第二个参数返回默认值
// var num = prompt("返回输入的值","默认值");
// alert(num); //print();//显示打印对话框
//find();//显示查找对对话框 ; //2.新建窗口
//第二个参数给打开的窗口命名
//window.open("http://www.baidu.com","qingkun");
//window.open("tabs.html");
//第三个参数用来设置新窗口的属性
//window.open("tabs.html","qingkun","width=300,height=300"); //3.窗口的位置和大小
//位置
//IE,Google支持:screenLeft screenTop
//alert(window.screenLeft);
//alert(window.screenTop); //firefox google支持screenX screenY
//alert(window.screenX);
// alert(window.screenY); //兼容性写法
// var x = typeof screenLeft == "number"? screenLeft:screenX;
// var y = typeof screenTop == "number"? screenTop:screenY;
// alert(x+","+y); //获取窗口大小 IE8不支持
// alert(window.innerHeight);//窗口页面高度
// alert(window.innerWidth);//窗口页面宽度 // alert(window.outerHeight);//窗口高度+边框高度
// alert(window.outerWidth);//窗口宽度+边框宽度 //IE 8
// document.documentElement.clientHeight;
// document.documentElement.clientWidth;
//IE 6
// document.body.clientHeight
// document.body.clientWidth //兼容性
// var width = innerWidth;
// var height = innerHeight;
// if(typeof width != "number"){
// if (document.compatMode == "CSS1Compat") {
// width = document.documentElement.clientWidth;
// height = document.documentElement.clientHeight;
// }else{
// width = document.body.clientWidth;
// height = document.body.clientHeight;
// }
//
// } //4.间隔调用和超时调用
//超时调用 setTimeout
//setTimeout("alert('123')",1000); // function show(){
// alert(123);
// }
// setTimeout(show,1000); // var a = setTimeout(function(){
// alert(123);
// },1000);
// alert(a);//返回一个唯一的整数值
// clearTimeout(a);//清除超时调用 //间隔调用 setInterval 重复执行
// var b = setInterval(function(){
// alert("hello");
// },1000);
//
// setTimeout(function(){
// clearInterval(b);
// },1000);
// //实现一个定时器的功能 5s
// var s = 0;
// var a = setInterval(function(){
// s++;
// if (s == 5) {
// alert("计时结束");
// clearInterval(a);
// }
// },1000); //location
//window.location.href = "http://www.baidu.com?name=lisi&age=23";
//alert(window.location); // alert(window.location.protocol);//协议
// alert(window.location.hostname); //主机名
// alert(window.location.port);//端口号
// alert(window.location.pathname)//路径 //alert(window.location.hash);//获取锚点
//alert(window.location.search);//获取?后面 //截取?后面 function getSearch(){
var arrs = {};
//?name=lisi&age=23
var str = window.location.search.length>0?window.location.search.substring(1):"";
//alert(typeof str);
var arr = str.split("="); var a = null,m = null,n = null;
//alert(typeof arr)
console.log(arr[1]);
for (var i=0;i<arr.length;i++) {
a = arr[i].split("=");
m = a[0];
n = a[1];
arrs[m]=n;
}
return arrs;
}
var sss = getSearch();
//console.log(sss);
//alert(arrs["name"]);
// alert(arrs["age"]); //2:
var str = "name=qingkun&age=23";
var arr = str.split("&");
var arrs = {};
// console.log(arr);
for (var i=0;i<arr.length;i++) {
var a = arr[i].split("=");
// console.log(a);
var m = a[0];
var n = a[1];
arrs[m] = n;
}
// alert(JSON.stringify(arrs));
for (var j in arrs) {
// console.log(j);
// console.log(arrs[j]);
} //改变地址栏中的地址
function changeUrl(){
window.location.href = "tabs.html";//当前窗口
//window.open("tabs.html");//新窗口
// window.location.assign("tabs.html");
// window.location.replace("tabs.html");//不会生成历史记录
// window.open("tabs.html");//新窗口
// window.location.reload();//从缓存中加载
// window.location.reload(true);//从服务器中加载 }