table of Contents
First, what is BOM
BOM: Browser Object Model, browser object model
FIG BOM structure:
It can be seen from the figure:
- BOM is the top window object (core) objects , all objects are extending through it, and may also be referred to as a sub-window object.
- DOM is a part of the BOM.
window object:
- The window object is the top-level object in JavaScript .
- Global variables, custom methods and properties is also a function of the object window.
- When the properties and methods of the window object called window can be omitted.
Second, the common built-in method of BOM and built-in objects
System dialog box pops up:
For example, alert(1)it is window.alert(1)shorthand, because it is a child window of the method. System dialog box in three ways:
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用Open the window, close the window:
Open the window:
window.open(url,target)
//url：要打开的地址。
//target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。close the window:
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面)Get the window width and height:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度 Timer:
Js timer in two ways:. 1 setTimeout () 2. setInterval ()
setTimeOut():
Only once after a specified time
/定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器setInterval():
In the time period specified execution cycle
/实时刷新 时间单位为毫秒
var t = setInterval('refreshQuery()',8000);
/*刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
window.clearInterval(t);//去掉定时器Both methods and take the different scenarios and choose according to business needs,
For both methods, if desired should be noted that certain actions accurately performed after every fixed time interval, it is best to use the setInterval, and due to the continuous call if you do not interfere with each other problems, in particular every call the function requires heavy computation and a long processing time, it is best to use setTimeout
Object location:
window.locationIt can be abbreviated to location. location is equivalent to the browser address bar, url can be parsed into separate segments.
Property location object
- href: Jump
- hash returned later in the content url #, # comprising
- host host names, including port
- hostname hostname
- Of the path portion pathname url
- protocol agreement is generally http, https
- search query string
Example location.href properties :
Example 1: When you click the box, jump
<body>
<div>百度一下</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
// window.open("http://www.baidu.com","_blank");
//方式二
}
</script>
</body>Automatically jump to Baidu after 5 seconds: Example 2
Sometimes, when accessing a Web page that does not exist, it will be prompted after 5 seconds automatically jump to a specific page, then you can use location. For example:
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>location.reload (): reload
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)navigator object
Some attribute window.navigator can get some information about the client
- userAgent: system, browser
- platform: browser support system, win / mac / linux
example:
console.log(navigator.userAgent);
console.log(navigator.platform);history objects
Back:
history.back()
history.go(-1)：0是刷新go ahead:
history.forward()
history.go(1)screen objects
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度