博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于JavaScript中的BOM总结
阅读量:4589 次
发布时间:2019-06-09

本文共 2894 字,大约阅读时间需要 9 分钟。

BOM是“Browser Object Model”的缩写,简称“浏览器对象模型”。

 

BOM定义了JavaScript操作浏览器的接口,提供了访问某些功能(如浏览器窗口大小、版本信息、浏览历史记录等)的途径以及操作方法。

 

BOM只是JavaScript脚本实现的一部分,没有任何相关的标准,W3C也没有对该部分作出规范,每种浏览器都有自己的BOM实现。

 

Window对象包括DOManchors/forms/images/links/location)和BOMframes/history/location/navigator/screen)。

 

系统对话框

  1.弹出警告

    alert(); //直接弹出警告框。

  2.确定和取消

    confirm(“请确定或者取消”);

    if(confirm(“请确定或者取消”)){

      alert(“你按了确定”); //an确定返回true

    }else{

      alert(“你按了取消!”) //按取消返回false

    };

  3.输入带输入提示框

    var num = prompt(“请输入一个数字”, 0); //两个参数,一个提示,一个值

    alert(num); //得到输入的值

 

新建窗口

  window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口,一般可以接受三个参数:要加载的url、窗口的名称或者窗口的目标、一个特性的字符串。

  open(“http://www.baidu.com”); //新建页面并打开百度

  open(“http://www.baidu.com”,”baidu”); //新建页面并命名窗口并打开百度

  open(“http://www.baidu.com”,”_parent”); //在本页窗口打开,_blank是新建

 

  注:不命名会每次打开新窗口,命名的第一次打开新窗口,之后在这个窗口中加载。

 

  window.close() //firefox不支持

  用法:可以关闭自己或者自己创建的子窗口。

 

  第三个参数:

  open(‘http://www.baidu.com’, ’baidu’, ’width=400, height=400, top=200, left=200’);

  //第三个参数逗号分隔,不写单位。

  //open本身返回子窗口的window对象

  var box = open(); box.alert(‘’); //可以指定弹出的窗口执行alert();

 

窗口的移动

  <input type="button" value="打开窗口" οnclick="openWin()"/>

  <input type="button" value="移动窗口" οnclick="moveWin()"/>

  var myWindow;

  function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是我的窗口</p>");
  }
  function moveWin(){
    myWindow.moveBy(50,100);
    myWindow.focus();
  }

  window.moveTo(x,y)把窗口的左上角移动到一个指定的坐标。

  window.moveBy(x,y)可相对窗口的当前坐标把它移动指定的像素。

  X 要把窗口右移的像素数;

  Y 要把窗口下移的像素数。

 

Location对象

  locationBOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是window对象的属性,也是document对象的属性;所以window.locationdocument.location等效。

  alert(window.location); alert(location); alert(document.location); //获取当前URL

 

  location对象的属性和方法:

  location.search = “?id=5”; //设置?后面的字符串,并跳转

  location.href = “http://www.baidu.com”; //设置跳转的URL,并跳转

  location.reload(); //最有效的重新加载,有可能缓存加载

  location.reload(true); //强制加载,从服务器源头重新加载

  注意:reload()函数不能直接执行,必须要放到事件函数内执行。

 

history对象

  history对象是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起。

  属性:

  history.length; //history对象中的记录数。

  方法:

  history.back(); //前往浏览器历史条目前一个URL,类似后退;

  history.forward(); //前往浏览器历史条目下一个URL,类似前进;

  history.go(num); //浏览器在history对象中向前或向后。

  history对象最初设计来表示窗口的浏览历史。但是出于隐私方面的原因,开发人员无法访问用户浏览过的URL

 

navigator对象

  appCodeName 返回浏览器的代码名;

  appName 返回浏览器的名称;

  appVersion 返回浏览器的平台和版本信息;

  browserLanguage 返回当前浏览器的语言;

  cookieEnabled 返回指明浏览器中是否启用cookie的布尔值;

  platform 返回运行浏览器的操作系统平台;

  systemLanguage 返回OS使用的默认语言;

  userAgent 返回由客户机发送服务器的user-agent头部的值;

  userLanguage 返回OS的自然语言设置。

 

 

window对象常见事件

  onload事件

  window.onload = function(){

  }

  onscroll事件

  document.documentElement.scrollTop 代表垂直的滚动条,向下滚动的距离

  document.body.scrollTop //chrome 代表垂直的滚动条,向下滚动的距离

  document.documentElement.scrollLeft

  document.body.scrollLeft //chrome

 

 

 

转载于:https://www.cnblogs.com/paul0705/p/7728898.html

你可能感兴趣的文章
【Linux】Centos下安装ffmpeg
查看>>
VSCode使用随笔
查看>>
MySQL 常用命令
查看>>
nginx FastCGI配置 No input file specified
查看>>
iOS - 拓展
查看>>
Windows命令远程执行工具Winexe
查看>>
XamarinAndroid组件教程RecylerView动画组件使用动画(3)
查看>>
linux vim 配置 go 开发环境
查看>>
week 6 CORS
查看>>
Openstack Neutron:二层技术和实现
查看>>
组合设计模式
查看>>
第十五部分_Struts2.1拦截器深度剖析、异常处理
查看>>
[codevs1286]郁闷的出纳员
查看>>
Python匿名函数详解
查看>>
python面向对象(六)之元类
查看>>
quartz.net插件类库封装(含源码)
查看>>
package.json中 npm依赖包版本前的符号的意义
查看>>
Cygwin下获取Android源代码
查看>>
C 自删除技术---批处理方式
查看>>
maven学习(下)利用Profile构建不同环境的部署包
查看>>