JavaScript学习笔记（七）：js 浏览器对象模型 (BOM)

忘是亡心i 2022-04-23 04:38 116阅读 0赞

## JavaScript Window - 浏览器对象模型 ##

### 小案例1：显示浏览器窗口的高度和宽度 ###

*  innerHeight / clientHeight 浏览器窗口的内部高度(包括滚动条)
 *  innerWidth / clientWidth 浏览器窗口的内部宽度(包括滚动条)

<p id="demo"></p>
    
    <script>
    
        var w = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;
    
        var h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
    
    document.getElementById("demo").innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。";
    
    </script>

### 小案例2：显示浏览器窗口的一些其他方法 ###

*  window.open(URL,name,features,replace) - 打开新窗口

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:104px;">参数</td> 
   <th style="text-align:center;vertical-align:middle;">描述</th> 
  </tr> 
  <tr> 
   <td style="width:104px;">URL</td> 
   <td>可选。声明了要在新窗口中显示的文档的 URL。值是空字符串，新窗口就不会显示任何文档。</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">name</td> 
   <td>可选。该字符声明了新窗口的名称。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">features</td> 
   <td>可选。声明了新窗口要显示的标准浏览器的特征。</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">replace <p>&nbsp;</p> </td> 
   <td> <p>可选。</p> 
    <ul> 
     <li>true - URL 替换浏览历史中的当前条目。</li> 
     <li>false - URL 在浏览历史中创建新的条目。</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

打开一个 200 \* 100 的新窗口和指定窗口的方法：

function openWin(){
        myWindow=window.open('','','width=200,height=100');
        myWindow.document.write("<p>这是我的窗口</p>");
    }
    
    function open_win() {
        window.open("http://www.baidu.com.cn")
    }

*  window.close() - 关闭当前窗口
 *  window.moveTo(x,y) - 移动当前窗口

function moveWin(){
        myWindow.moveTo(0,0);
        myWindow.focus(); // 把键盘焦点给予一个窗口
    }

*  resizeTo(width,height) - 调整当前窗口的尺寸

<table> 
 <tbody> 
  <tr> 
   <th style="text-align:center;vertical-align:middle;">参数</th> 
   <th style="text-align:center;vertical-align:middle;">描述</th> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>必需。想要调整到的窗口的宽度。以像素计。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>可选。想要调整到的窗口的高度。以像素计。</td> 
  </tr> 
 </tbody> 
</table>

function resizeWindow() {
      window.resizeTo(500,300)
    }

# #

## JavaScript Window Screen ##

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">属性</td> 
   <td style="text-align:center;vertical-align:middle;">描述</td> 
  </tr> 
  <tr> 
   <td>screen.availWidth</td> 
   <td>可用的屏幕宽度。属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。</td> 
  </tr> 
  <tr> 
   <td>screen.availHeight</td> 
   <td>可用的屏幕高度。属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。</td> 
  </tr> 
 </tbody> 
</table>

## JavaScript Window Location ##

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:155px;">属性</td> 
   <td style="text-align:center;vertical-align:middle;width:692px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:155px;">location.hostname</td> 
   <td style="width:692px;">返回 web 主机的域名。</td> 
  </tr> 
  <tr> 
   <td style="width:155px;">location.pathname</td> 
   <td style="width:692px;">返回当前页面的路径和文件名。</td> 
  </tr> 
  <tr> 
   <td style="width:155px;">location.port</td> 
   <td style="width:692px;">返回 web 主机的端口 （80 或 443）。</td> 
  </tr> 
  <tr> 
   <td style="width:155px;">location.protocol</td> 
   <td style="width:692px;">返回所使用的 web 协议（http:// 或 https://）。</td> 
  </tr> 
  <tr> 
   <td style="width:155px;">location.href</td> 
   <td style="width:692px;">属性返回当前页面的 URL。</td> 
  </tr> 
  <tr> 
   <td style="width:155px;">location.assign()</td> 
   <td style="width:692px;">方法加载新的3文档。</td> 
  </tr> 
 </tbody> 
</table>

## ##

### 小案例3：使用 location.assign() 加载一个新文档 ###

# #

## JavaScript Window History ##

window.history 对象包含浏览器的历史。在编写时可不使用 window 这个前缀。

### 小案例4：back() 方法和 forward() 方法的简单运用 ###

*  **history.back()** \- 加载历史列表中的前一个 URL。 与在浏览器点击后退按钮相同。

*  **history.forward()** \- 加载历史列表中的下一个 URL。与在浏览器中点击向前按钮相同。

除此之外可以用 **history.go()** 这个方法来实现向前，后退的功能。

# #

## JavaScript 计时事件 ##

做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

### 小案例4：计时事件 History () 和 setTimeout() 方法的运用 ###

*  setInterval("javascript function",milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。

显示一个时钟并设置停止事件：

// 每隔一秒，不停地执行 myTimer() 方法
    var myVar = null;
    function Interval() {
        myVar = setInterval(function(){myStarTime()}, 1000);
    }
    function myStarTime() {
        var d = new Date();
    		
        // 根据本地时间把 Date 对象的时间部分转换为字符串
        var t = d.toLocaleTimeString();
    		
        document.getElementById("time").innerHTML = t;
    }
    // 停止时钟
    function IntStopTime() {
        // 在创建计时方法时你必须使用全局变量
        clearInterval(myVar);
    }
    
    <div id="time"></div>
    <button onclick="Interval()">开始</button>
    <button onclick="IntStopTime()">停止</button>

*  setTimeout("javascript function",milliseconds) - 在指定的毫秒数后执行指定代码。