• JavaScript基础07——BOM


    BOM概念

       BOM是Browser Object Model的缩写,简称浏览器对象模型。这个对象就是window
            BOM提供了独立于内容而与浏览器窗口进行交互的对象
            BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
            BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C
            BOM最初是Netscape浏览器标准的一部分
     
        由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。

    window对象介绍,内置对象(location/history/navigator)及方法:

    //    什么是window对象,window对象是浏览器内置的一个对象,相当于BOM的一个抽象
    
    //    window对象是js中全局对象的寄存地。
    
        window对象的常见方法:
        alert(要显示的文本);      //弹出信息框
        prompt(提示对话框信息);   //弹出输入框,点击确定,返回字符串,点击取消,返回null
        confirm(提示文字);        //点击确定返回true,点击取消返回false
    
         close();                //关闭浏览器(火狐不支持!),但都支持通过别的网页打开的新的网页关闭
                                //不允许关闭非脚本打开的页面
    
        open(url,name,feature,replace);
            //open('http://www.baidu.com','_blank','width=300,height=300')
            //谷歌会默认把系统自动打开的新网页阻止掉,但不阻止通过事件打开的网页

    window对象下内置的子对象:

     1.history对象:该对象包含浏览器访问过的url。

    //     该对象的属性:
            history.length;         //返回历史记录的数量
    //     该对象的方法:
            history.back();         //后退,加载前一个url。
            history.forward();      //前进,需要后退一下之后,才有前进的方向
            history.go(num);        //参数为正,前进相应的数目,为负,后退相应的数目,为0,刷新

    2.location对象:包含当前url的相关信息,而history对象不能具体反映url的相关信息。

    //     该对象的属性:
            location.href;          //设置或返回完整的url
            location.search;        //返回url?后面的查询部分
            location.hash;          //是一个可读写的字符串,是url的锚部分(从#开始的部分)哈希
    //     该对象的方法:
            location.reload();      //刷新页面的方法,一般情况下,传递一个true,不使用缓存刷新。缓存?
            location.assign(url);   //加载新页面,当url为空字符时,加载当前页面    

     3.navigator对象:浏览器信息

            navigator.appName;      //返回当前浏览器名
            navigator.appCodeName;  //返回当前浏览器的代码名
            navigator.appVersion;   //返回当前浏览器的版本号和平台
            navigator.platform;     //返回当前计算机的操作系统    
    
    以上方法已经在逐渐被抛弃,出现一个新的属性替代这些属性:
            navigator.userAgent;    //返回浏览器信息

     几乎没什么卵用

            4.frames对象:包含当前页面所有的框架信息。
                 frames.length;                  //返回当前页面的框架数量
                 frames[0].location;             //修改第一个框架的地址
             5.screen对象:包含当前显示屏信息
                 screen.width/height             //屏幕总宽高度
                 screen.availWidth/availHeight   //屏幕的宽高(不包括任务栏)

    window.onload / onscroll/onresize 事件

    //  onload当文档加载完成后执行一些操作
        window.onload = function(){
            console.log("页面加载完成")
        }
    
    //  onscroll当页面发生滚动时执行一些操作
        window.onload = function(){
            console.log(1)            //当页面发生滚动时,打印1
        }
    
    //  onresize当窗口大小发生改变时执行一些操作
        window.onresize = function(){
            console.log(1)            //当窗口大小发生改变时,打印1
        }
    //  页面滚动条距离顶部的距离
        document.documentElement.scrollTop
    //  页面滚动条距离左边的距离
        document.documentElement.scrollLeft
  • 相关阅读:
    Vmware中“重新安装vmware-tools”按钮置灰如何解决
    如何实现Sublime Text3快速生成html代码
    Windows窗体编程你也行
    .NET基础技术总结
    C#考试题第一波
    C#认证题4(使用标准Windons窗体控件)
    通讯录数据库
    C#认证试题(3)
    c#认证题(2)
    c#认证试题
  • 原文地址:https://www.cnblogs.com/wuziqiang/p/12005858.html
Copyright © 2020-2023  润新知