• bom


    一、定义

    BOM(Browser Object Model) 即浏览器对象模型,主要是指一些浏览器内置对象如:

    window   全局对象    具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览器窗口的一个接口、  

    location   与地址栏内容相关、

    navigator  浏览器相关的内容,通常判断浏览器类型都是通过这个对象、

    screen   判断屏幕的高度宽度、

    history  访问浏览器的历史记录,如前进、后台、跳转到指定位置

    document   DOM是属于BOM的一个属性,

    等对象,用于完成一些操作浏览器的特定API。

    其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。  BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。

    二、详述

    1.window

    moveBy() 函数  moveTo() 函数   resizeBy() 函数    resizeTo() 函数   scrollTo() 函数   scrollBy() 函数    
    focus() 函数 blur() 函数 open() 函数 close() 函数 alert() 函数 confirm() 函数 prompt() 函数 defaultStatus 属性 status 属性 opener 属性
    setTimeout() 函数 clearTimeout() 函数 setInterval() 函数 clearInterval() 函数
    常用场景
    1.1获取窗口相对于屏幕左上角的位置

    window.onresize = function() {
    var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
    var topPos = (typeof window.screenLeft === 'number') ? window.screenTop : window. screenY;
    document.write(leftPos+","+topPos);
    console.log(leftPos+","+topPos);
    }

    1.2移动窗口,调整窗口大小

    window.moveTo(0,0)
    window.moveBy(20,10)
    window.resizeTo(100,100);
    window.resizeBy(100,100); 
    注意,这几个方法在浏览器中很可能会被禁用。
    1.3获得浏览器页面视口的大小
    var pageWith=document.documentElement.clientWidth||document.body.clientWidth;
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
    1.4导航和打开窗口
    window.open()既可以导航到特定的URL,也可以打开一个新的浏览器窗口,其接收四个参数,要加载的url,窗口目标(可以是关键字_self,_parent,_top,_blank),一个特性字符串,以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传递第一个参数。
    注意,在很多浏览器中,都是阻止弹出窗口的。
    1.5定时器

    setTimeout(code,millisec)
    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    code 必需,要调用的函数后要执行的 JavaScript 代码串。
    millisec 必需,在执行代码前需等待的毫秒数。
    clearTimeout(对象) 清除已设置的setTimeout对象

    1.6系统对话框

    alert():带有一个确定按钮

    confirm():带有一个确定和取消按钮

    prompt():显示OK和Cancel按钮之外,还会显示一个文本输入域

    1.7 scroll系列方法

    scrollHeight和scrollWidth 对象内部的实际内容的高度/宽度(不包括border)

    scrollTop和scrollLeft 被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离

    onscroll事件 滚动条滚动触发的事件

    2.document

    write() 函数
    writeln() 函数
    document.open() 函数
    document.close() 函数
    ...

    3.location对象

    location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。

    location.hash  #contents  返回url中的hash,如果不包含#后面的内容,则返回空字符串

    location.host  best.cnblogs.com:80  返回服务器名称和端口号

    location.port  80  返回端口号

    location.hostname  best.cnblogs.com  返回服务器名称

    location.href  http://best.cnblogs.com  返回当前加载页面的完整url

    location.pathname  /index.html  返回url中的目录和文件名

    location.protocol http  返回页面使用的协议

    location.search  ?q=javascript  返回url中的查询字符串

    改变浏览器的位置:location.href=http://www.baidu.com

    如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录,用户不能回到前一个页面。

    location.reload():重置当前页面,可能从缓存,也可能从服务器;如果强制从服务器取得,传入true参数 

    4.history对象

    history对象保存着用户上网的历史记录,使用go()实现在用户的浏览记录中跳转:

    history.go(-1) 等价于history.back()
    
    history.go(1) 等价于 history.forward()
    
    history.go(1) //前进两页
    
    history.go('cnblogs.com')

    5.navigator对象

    navigator.userAgent:用户代理字符串,用于浏览器监测中、

    navigator.plugins:浏览器插件数组,用于插件监测

    navigator.registerContentHandler 注册处理程序,如提供RSS阅读器等在线处理程序。

    浏览器名称    navigator.appCodeName
    次版本信息    navigator.appMinorVersion
    完整的浏览器名称    navigator.appName
    浏览器版本    navigator.appVersion
    浏览器编译版本    navigator.buildID
    是否启用cookie    navigator.cookieEnabled
    客户端计算机CPU类型    navigator.cpuClass
    浏览器是否启用java    navigator.javaEnabled()
    浏览器主语言    navigator.language
    浏览器中注册的MIME类型数组    navigator.mimeTypes
    是否连接到网络    navigator.onLine
    客户端计算机操作系统或者CPU   navigator.oscpu
    浏览器所在的系统平台   navigator.platform
    浏览器中插件信息数组   navigator.plugins
    用户的首选项    navigator.preference()
    产品名称    navigator.product
    产品的次要信息 navigator.productSub 操作系统的语言 navigator.systemLanguage 浏览器的用户代理字符串 navigator. userAgent 操作系统默认语言 navigator.userLanguage 用户个人信息对象 navigator.userProfile 浏览器品牌 navigator.vendor 浏览器供应商次要信息 navigator.vendorSub

    参考链接1
    参考链接2




  • 相关阅读:
    Linux内核的ioctl函数学习
    两个VLC实现播放串流测试
    嵌入Linux启动配置文件
    Qt/Embedded中使用jpeglib
    Flex中使用TabBar ViewStack 控件不加载问题
    Flex 特殊字符及转义符
    undefined reference to `jpeg_std_error(jpeg_error_mgr*)
    OK6410预览并实现截图操作(RGB565)
    C# 工具条控件设置背景色去除边框
    TeamFoundation Server 使用技巧
  • 原文地址:https://www.cnblogs.com/justSmile2/p/9707004.html
Copyright © 2020-2023  润新知