JS 浏览器BOM-->简介和属性

1.简介：

　　BOM：浏览器对象模型(Browser Object Model),是一个用于访问浏览器和计算机屏幕的对象集合。我们可以通过全局对象window来访问这些对象。

 2.属性

　　window.document

　　是一个BOM对象，表示的是当前所载入的文档(即页面)，但它的方法和属性同时也属于DOM对象所涵盖的范围

　　

　　window.frames

　　是当前页面中所有框架的集合

　　

　　window.navigator

　　用于反应浏览器及其功能信息的对象

 

　　window.screen

　　提供浏览器以外的环境信息

 

　　window.location

　　　　href属性：控制浏览器地址栏内容

　　　　reload()：刷新页面

　　　　reload(true)：刷新页面，不带缓存

　　　　assign()：加载新的页面

　　　　replace()：加载新的页面（注意：不会再浏览器的历史记录表中留下记录）

 

　　window.history

　　　　window.history.length:获取历史记录的长度

　　　　back():上一页

　　　　forward():下一页

　　　　go(num): 具体到哪一页

　　　　　　　　当num<0时，跳转到自己后方的第num个记录

　　　　　　　　当num>0时，跳转到自己前方的第num个记录

　　举例1：点击浏览器页面按钮，实现打印

　　html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <button onclick="func()">按钮</button>
    </body>
</html>

　　js代码：

function func(){
    console.log('hello world!')
}

　　输出：

 

　　举例2：点击按钮跳转带有‘hello world’的html页面

　　准备带有‘hello world’的html页面，如下图

 

　　html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <button onclick="func()">按钮</button>
    </body>
</html>

　　js代码：

function func(){
    window.location.href='hw.html'
}

　　输出：

posted @ 2020-04-15 22:14  abner_pan  阅读(225)  评论(0)  编辑  收藏  举报