JavaScript-BOM

最新推荐文章于 2024-10-11 17:39:47 发布

无忧#

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量266

点赞数 2

文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/weixin_52473454/article/details/121320140

版权

BOM即浏览器对象模型(Browser Object Model)

浏览器对象包括
Window(窗口)

Navigator（浏览器）

Screen(客户端屏幕）

History(访问历史）

Location（浏览器地址）

一.Window

1.获取文档显示区域的高度和宽度。

一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。通过window对象可以获取文档显示区域的高度和宽度（通过放大和缩小网页大小，值是不同的）。

<script>
  document.write("文档显示区域的宽度"+window.innerWidth);
  document.write("<br>");
  document.write("文档显示区域的高度"+window.innerHeight);
</script>

2.获取外部窗体的宽度和高度。

所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome等等。

  document.write("浏览器的宽度:"+window.outerWidth);
  document.write("<br>");
  document.write("浏览器的高度:"+window.outerHeight);

3.打开一个新窗口

有的时候，你碰到一些网站会自动打开另一个网站，那么是怎么做到的呢?就是通过window的open方法做到的，不建议使用，如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验。

一个是用 myWindow=window.open("")实现;一个是用<a href=""></a>实现，快试试有什么区别。

<script>
function openNewWindow(){
  myWindow=window.open("https://www.baidu.com/");
}
</script>
<button onclick="openNewWindow()">打开一个新的窗口</button>
<a href="https://www.baidu.com/">打开一个新的窗口</a>

二.Navigator

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName	浏览器名称
navigator.appVersion	浏览器版本
navigator.language	浏览器设置的语言
navigator.appCodeName	浏览器内部代码
navigator.platform	浏览器操作系统
navigator.cookieEnabled	浏览器是否启用Cookies
navigator.userAgent	浏览器的用户代理报头

注意：navigator的信息很容易被修改，所以针对不同浏览器的判断最好用短路运算符。
例如： var width = window.innerWidth || document.body.clientWidth;

打印浏览器的相关信息：

<script type="text/javascript">
document.write("<p>浏览器产品名称：");
document.write(navigator.appName + "</p>");

document.write("<p>浏览器版本号：");
document.write(navigator.appVersion + "</p>");

document.write("<p>浏览器内部代码：");
document.write(navigator.appCodeName + "</p>");

document.write("<p>操作系统：");
document.write(navigator.platform + "</p>");

document.write("<p>是否启用Cookies：");
document.write(navigator.cookieEnabled + "</p>");

document.write("<p>浏览器的用户代理报头：");
document.write(navigator.userAgent + "</p>");
</script>

三.Screen

Screen对象表示用户的屏幕相关信息,返回用户的屏幕大小，以及可用屏幕大小,如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。

通过测试代码，发现放大和缩小浏览器并不改变值（不同于Window）

<script type="text/javascript">
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
</script>

四.History

History用于记录访问历史

返回上一次的访问

新建一个html文件，内容是demo的地址，在demo中返回上一个网页。

demo:

	<body>
		<a href="BOM.html">点一下</a>
	</body>

BOM:

<script>
function goBack()
  {
     history.back();
  }
</script>
<body>
<button onclick="goBack()">返回</button>
</body>

返回上上次的浏览网页：

<script>
function goBack()
  {
     history.go(-2); //-1表示上次，-2表示上上次，以次类推
  }
</script>

<button onclick="goBack()">返回上上次</button>

五.Location

Location表示浏览器中的地址栏

1.刷新当前页面：reload方法刷新当前页面。

<span>当前时间:</span>
<script>
  var d = new Date();
  document.write(d.getFullYear());
  document.write("年");
  document.write(d.getMonth()+1);
  document.write("月");
  document.write(d.getDate());
  document.write("日  ");
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());

function refresh(){
  location.reload();
}
</script>

<br>
<button onclick="refresh()">刷新当前页面</button>

2.跳转到另一个页面

<script>
function jump(){
  //方法1
  //location="https://www.baidu.com/";

  //方法2
  location.assign("https://www.baidu.com/");
  
}
</script>

<br>
<button onclick="jump()">跳转到首页</button>

3.Location的其他属性

如通信协议，主机名，端口号，访问路径，锚点，参数列表。

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

p("协议 location.protocol:"+location.protocol);
p("主机名 location.hostname:"+location.hostname);
p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);

p("主机加端口号 location.host: "+location.host);
p("访问的路径  location.pathname: "+location.pathname);

p("锚点 location.hash: "+location.hash);
p("参数列表 location.search: "+location.search);

</script>

六.弹出框

浏览器上常见的弹出框有：警告框，确认框，提示框这些都是通过调用window的方法实现的。
比如警告框用的是window.alert("警告内容")，因为很常用，所以就把window省略掉，直接使alert。

1.警告框

警告框 alert，常用于消息提示，比如注册成功等等。

<script>
function register(){
   alert("注册成功");
}
</script>
 
<br>
<button onclick="register()">注册</button>

2.确认框

确认框 confirm，常用于危险性操作的确认提示。比如删除一条记录的时候，弹出确认框，confirm返回基本类型的Boolean true或者false。

<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>
 
<br>
<button onclick="del()">删除</button>

3. 输入框

输入框 prompt，用于弹出一个输入框，供用户输入相关信息。因为弹出的界面并不好看，很有可能和网站的风格不一致，所以很少会在实际工作中用到。

<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
 
<br>
<button onclick="p()">请输入用户名</button>

七.计时器

1.只执行一次时

函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后，执行一次函数function name。
本例在3秒钟后，打印当前时间。
解释:
document.getElementById 获取id=time的div元素。
.innerHTML 修改该元素的内容。

<script>
 
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
 
}

function showTimeIn3Seconds(){
   setTimeout(printTime,3000);  
}
 
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

2.不停地重复执行时

函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数，重复的时间间隔由第二个参数指定。

<p>每隔1秒钟，打印当前时间</p>
  
<div id="time"></div>
  
<script>
  
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  
}
  
var t = setInterval(printTime,1000);
  
</script>

<br><br>

3.如何终止重复执行

通过clearInterval终止一个不断重复的任务，本例是当秒是5的倍数的时候，就停止执行。

<p>每隔1秒钟，打印当前时间</p>
  
<div id="time"></div>
  
<script>
  
var t = setInterval(printTime,1000);

function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  if(s%5==0)
     clearInterval(t);
}
  
</script>
<br>

4.不要在setInterval调用的函数中使用document.write();注：（部分浏览器，比如firefox有这个问题，其他浏览器没这个问题。）
假设setInterval调用的函数是printTime, 在printTime中调用document.write();
只能看到一次打印时间的效果。
这是因为document.write，会创建一个新的文档，而新的文档里，只有打印出来的时间字符串，并没有setInterval这些javascript调用，所以只会看到执行一次的效果。