欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS中的BOM应用

程序员文章站 2022-08-09 12:02:37
我们曾经讲过js由三部分组成，其中一个部分就是bom，用于对浏览器进行操作。这节课我们主要就来介绍bom。 bom基础 我们先来看一个bom的最基础功能：打开、关闭窗口...

我们曾经讲过js由三部分组成，其中一个部分就是bom，用于对浏览器进行操作。这节课我们主要就来介绍bom。

bom基础

我们先来看一个bom的最基础功能：打开、关闭窗口：

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="打开窗口" onclick="window.open('http://www.zhinengshe.com/');" />
 </body></html>

open方法用于打开一个窗口，相对的close方法用于关闭一个窗口。这里我们可以用open方法实现一个应用：运行代码。

在这之前，我们要给大家补充一个关于document.write的小知识。

<!doctype html><html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="write" onclick="document.write('abc')" />
 </body></html>

打开源码可以发现，当我们点击了按钮后，整个页面的源码就只剩下了“abc”——也就是说，如果document.write如果放在事件里面使用，会先将页面完全清空再重写。

可以看到，我们的运行代码案例，使用document.write方法是非常合适的：

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var otxt=document.getelementbyid('txt1');
   var obtn=document.getelementbyid('btn1');
  
   obtn.onclick=function ()
   {
    var onewwin=window.open('about:blank', '_blank');
  
    onewwin.document.write(otxt.value);
   };
  };
  </script>
 </head>
 <body>
  <textarea id="txt1" rows="10" cols="40"></textarea><br>
  <input id="btn1" type="button" value="运行" />
 </body></html>

其中_blank代表新打开一个窗口（在本窗口打开用_self），about:blank代表打开的是一个空白窗口，然后我们使用document.write向新窗口写入html，就可以在新窗口运行html代码了。

讲完open后，我们来说说close的一些问题。close的使用非常简单，使用window.close便可以执行关闭窗口的事件。但是在火狐浏览器下，是无法close一个用户打开的窗口，只有一个窗口是用open方法打开的时候才能用close方法关闭。

讲完open和close方法后，我们来说两个常用的属性：window.nevigator.useragent和window.location。前者的作用是获取当前浏览器的版本信息，后者的作用是获取当前网页的地址（不仅可以读取，也可以赋值，可以通过修改location跳转当前网页的网址），大家可以使用一下看看返回的内容，这里就不再列举了。

尺寸及坐标

这里我们讨论一下js关于尺寸和坐标的内容。

首先要提到的就是关于可视区尺寸的知识。什么是可视区尺寸呢？其实就是用户端能在屏幕上看到网页部分的尺寸。可视区的尺寸会随着窗口的大小而变化。

通过document.documentelement.clientwidth和document.documentelement.clientheight可以获取当前页面可视区的宽度和高度。

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var obtn=document.getelementbyid('btn1');
   obtn.onclick=function ()
   {
    alert('宽:'+document.documentelement.clientwidth+'高:'+document.documentelement.clientheight);
   };
  };
  </script>
 </head>
 <body>
  <input id="btn1" type="button" value="可视区大小" />
 </body></html>

效果如下：

JS中的BOM应用

此外针对可视区，还有一个属性叫scrolltop，也就是滚动距离，或者说是可视区到页面顶端的距离。

<!doctype html><html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <script>
 document.onclick=function ()
 {
  //ie、ff
  //alert(document.documentelement.scrolltop);
 
  //chrome
  //alert(document.body.scrolltop);
 
  var scrolltop=document.documentelement.scrolltop||document.body.scrolltop;
 
  alert(scrolltop);
 };
 </script>
 </head>
 <body style="height:2000px;">
 </body></html>

效果如下：

//这里有图

值得注意的是document.documentelement.scrolltop仅仅在ie下兼容，在chrome下的写法则为document.body.scrolltop，因此我们用||方法处理兼容问题。
常用方法和事件

这里我们尝试使用除fixed以外的另一种方法实现元素的固定定位（fixed在ie6下不兼容）。

这里我们再画一张图：

JS中的BOM应用

可以看得出，只要我们将黑线的长度计算出来，就可以将右下方的div块进行固定定位了。而黑线的长度正好等于可视区高度减去div块的offsetheight。

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
  #div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
  body {height:2000px;}
  </style>
  <script>
  window.onscroll=function ()
  {
   var scrolltop=document.documentelement.scrolltop||document.body.scrolltop;
   var odiv=document.getelementbyid('div1');  odiv.style.top=document.documentelement.clientheight-odiv.offsetheight+scrolltop+'px';
  };
  </script>
 </head>
 <body>
 <div id="div1"></div>
 </body></html>

效果如下：

JS中的BOM应用

可以看到我们的div块有轻微的抖动，因为onscroll函数一直在发生，每发生一次便会调用一次，所以会发生这种情况。此外还存在一个更严重的情况：如果我们改变窗口大小，div块并不会跟着走而是保持在原地，因此我们还要用到另一个事件——

window.onresize(页面大小改变时触发的事件：）：

window.onscroll=window.onresize=function (){...}

最后我们来说说几个常用的系统对话框：

  • alert("内容") 警告框，没有返回值
  • confirm("提问的内容") 选择框，会给确定或取消选项，返回一个boolean
  • prompt("提示文字","默认文字") 会弹出一个可输入的文本框，返回值为输入的文本内容（字符串），不输入则为null

总结

以上所述是小编给大家介绍的js中的bom应用，希望对大家有所帮助

上一篇： htm-文字标签和注释标签

下一篇： Rsync文件同步工具

推荐阅读