BOM

最新推荐文章于 2021-12-20 10:18:49 发布

github@niexia

最新推荐文章于 2021-12-20 10:18:49 发布

阅读量395

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/niexia_/article/details/76959092

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关

window对象

BOM 的核心对象是window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript 规定的Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window 作为其Global 对象。
1.全局作用域
所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。
2.窗口关系及框架
如果页面中包含框架，则每个框架都拥有自己的window 对象，并且保存在frames 集合中。在frames集合中，可以通过数值索引（从0 开始，从左至右，从上到下）或者框架名称来访问相应的window 对象。每个window 对象都有一个name 属性，其中包含框架的名称。

<html>
    <head>
        <title>Frameset Example</title>
        <meta charset="UTF-8">
    </head>
<frameset rows="160,*">
    <frame src="frames/frame1.html" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="frames/frame2.html" name="leftFrame">
        <frame src="frames/frame3.html" name="rightFrame">
    </frameset>
</frameset>
</html>

对这个例子而言，可以通过window.frames[0]或者window.frames[“topFrame”]来引用上方的框架。不过，恐怕你最好使用top 而非window 来引用这些框架（例如，通过top.frames[0]）,top 对象始终指向最高（最外）层的框架，也就是浏览器窗口,与top相对的是parent,parent指向的是父框架。
3.系统对话框
（1）alert(‘提示信息’)
（2）confirm(“确认信息”)
（3）prompt(“弹出输入框”)

alert('nice to meet you');

var sure = confirm('are you have a good time ?');
if(sure){
alert('yes, you have a good time !');
}

var getname = prompt('what's you name ?','name');//参数1为提示语, 参数2为默认字符.
alert(getname);

4.简写调用和超时调用
间歇调用使用setTimeout方法,超时调用使用setInterval方法，这两个方法都有两个参数,第一个参数为执行的代码或函数,第二个参数为执行时间.当然这两种调用也有对应的方法来清除调用.

    <script type="text/javascript">
        var timeoutId=setTimeout(function () {
            location.href="http://www.wrox.com";
        },1000);
        //注意把它取消
        clearTimeout(timeoutId);
    </script>

 setTimeout(function(){ alert('good morning!'); },1000); //一秒后弹出弹框.

 var count = 0;
 var interval =  setInterval(function(){      
    count++;
    if(count > 10){
         clearInterval(interval);  //清除间歇调用
        }
 },1000);

location对象

location 是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
（1）hash 返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串,例”#contents”
（2）host 返回服务器名称和端口号(如果有).例”www.zhaosywz.com:80”
（3）hostname 返回不带端口号的服务器名称.例”www.zhaosywz.com”
（4）href 返回当前页面的完整url.例”www.zhaosywz.com/index.html”
（5）pathname 返回url中的目录或文件名,例”/category/shoes”
（6）port 返回url的端口号,如果没有则返回空字符串.例”8080”
（7）protocol 返回页面使用的协议。通常是http:或https:
（8）search 返回URL的查询字符串。这个字符串以问号开头,’?id=100’

navigator对象

screen对象基本只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素的宽度和高度等。
（1）height: 获取整个屏幕的高。
（2）width : 获取整个屏幕的宽。
（3）availHeight: 整个屏幕的高减去系统部件的高
（4）availWidth : 整个屏幕的宽减去系统部件的宽
检查插件

//检测插件（在IE 中无效）
function hasPlugin(name){
name = name.toLowerCase();
for (var i=0; i < navigator.plugins.length; i++){
if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
return false;
}
//检测Flash
alert(hasPlugin("Flash"));

history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

//后退一页
history.go(-1);

//前进一页
history.go(1);

//前进两页
history.go(2);

//跳转到最近的包含'wrox.com'字符的页面
history.go("wrox.com");

//后退一页
history.back();
//前进一页
history.forward();