从零开始学习前端JAVASCRIPT — 5、JavaScript基础BOM

1：BOM（Browser Object Model）概念

window对象是BOM中所有对象的核心。

2：window属性（较少用）

self：self代表自己，相当于window。　

window.self; //指向自身窗口

　　parent：返回父窗口。

window.parent //指向父元素的窗口

top：返回顶层窗口，和parent作用一样。

window.top

console.log(window.parent == window.top);

　　opener：窗口开启者。

console.log(window.opener);

3：window方法

1.window.open(url, name, feature, replace);

window.open('opener.html', 'open');//打开opener.html的页面，窗口的标题open

url：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。

这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。

feature：自行扩展。replace：自行扩展。

谷歌默认会把系统自动打开的新网页阻止掉，但不阻止通过事件打开新的网页。

2.close：关闭浏览器。（window.close()//关闭浏览器窗口）

但都支持通过别的网页打开的新的网页关闭。

3.alert(显示的文本)：弹出窗。（window.alert()//浏览器窗口弹框）

4.confirm(对话框提示的文字)：该方法有返回值，点击确定返回true，点击取消返回false。

console.log(window.confirm('今天下雪了吗？')); //点击确认输出true；点击取消输出false

5.prompt(提示信息)：输入框。点击确定返回字符串，点击取消返回null。

console.log(window.prompt('请问1+1等于几？'));

//弹出窗口有书写区域，返回值为输入的信息，若不填写为null

4：history对象

该对象包含浏览器窗口访问过的url。

1.属性

length 返回浏览器历史记录的数量

2.方法(使用以下方法返回网页history的记录不增不减)

back() 后退，加载前一个url。

forward() 前进。

go(number) 如果参数是正数，那么就是前进相应的数目，如果是负数那么反之，如果是0那么就是刷新。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>file1</title>

</head>

<body>

    <a href="file2.html">file2</a>

    <a href="file3.html">file3</a>

    <a href="file4.html">file4</a>

    <button id="back">回退到上一个页面</button>

    <button id="forward">前进到下一个页面</button>

    <button id="go">进两步</button>

    <script>

        console.log(history.length);

        var oBack = document.getElementById('back')

        oBack.onclick = function () {

            history.back()

        }

        var oForward = document.getElementById('forward')

        oForward.onclick = function () {

            history.forward()

        }

        var oGO = document.getElementById('go')

        oGO.onclick = function () {

            history.go()

        }

    </script>

</body>

</html>

页面一的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>file2</title>

</head>

<body>

    <a href="file1.html">file1</a>

    <a href="file3.html">file3</a>

    <a href="file4.html">file4</a>

    <button id="go">后退1步</button>

    <button id="back">回退到上一个页面</button>

    <button id="forward">前进到下一个页面</button>

    <script>

        console.log(history.length);

        var oBack = document.getElementById('back')

        oBack.onclick = function () {

            history.back()

        }

        var oForward = document.getElementById('forward')

        oForward.onclick = function () {

            history.forward()

        }

        var oGO = document.getElementById('go')

        oGO.onclick = function () {

            history.go(-1)

        }

    </script>

</body>

</html>

页面二的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>file3</title>

</head>

<body>

    <a href="file1.html">file1</a>

    <a href="file2.html">file2</a>

    <a href="file4.html">file4</a>

    <button id="go">刷新</button>

    <button id="back">回退到上一个页面</button>

    <button id="forward">前进到下一个页面</button>

    <script>

        console.log(history.length);

        var oBack = document.getElementById('back')

        oBack.onclick = function () {

            history.back()

        }

        var oForward = document.getElementById('forward')

        oForward.onclick = function () {

            history.forward()

        }

        var oGO = document.getElementById('go')

        oGO.onclick = function () {

            history.go(0)

        }

    </script>

</body>

</html>

页面三的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>file4</title>

</head>

<body>

    <a href="file1.html">file1</a>

    <a href="file2.html">file2</a>

    <a href="file3.html">file3</a>

    <button id="go">后退1步</button>

    <button id="back">回退到上一个页面</button>

    <button id="forward">前进到下一个页面</button>

    <script>

        console.log(history.length);

        var oBack = document.getElementById('back')

        oBack.onclick = function () {

            history.back()

        }

        var oForward = document.getElementById('forward')

        oForward.onclick = function () {

            history.forward()

        }

        var oGO = document.getElementById('go')

        oGO.onclick = function () {

            history.go(-1)

        }

    </script>

</body>

</html>

页面4的代码

5：location对象

包含有当前url的相关信息，而history对象不能具体反应url的相关信息。

完整的URL组成部分：协议（schema http:// https://）域名(domain) 端口号（port 80 443）/路径（path）查询字符串（？ query）锚点连接（# hash）

属性：

href：设置或返回完整的url。可以为相对路径，也可以为绝对路径。

search：返回url?后面的查询部分。hash ：是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

方法：

assign(url)：加载新的文档。

reload(boolean)：重新加载文档，当参数是true，任何时候都会重新加载，false的时候，只有在文档改变的时候才会加载，否则直接读取内存当中的。

replace(url)：用新的文档代替当前的文档。但不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

6：navigator对象

userAgent：用户代理信息，通过该属性可获取浏览器及操作系统信息。可通过此对象查看浏览器的信息，项目的不兼容此版本浏览器可给出用户的相关建议。

console.log(navigator.userAgent);

7：window事件

onresize：窗口缩放事件。

window.onresize = function () {

	console.log(2)

}

onload：加载事件网页加载完毕后执行。// 获取浏览器视窗宽度/高度

window.onload = function () {

	console.log(document.documentElement.clientWidth)

	console.log(document.documentElement.clientHeight)

}

onscroll：滚动事件。// 获取浏览器滚动条隐藏的宽度/高度

chrome(body)、火狐、IE(documentElement)

通过或者的方式兼容各版本的浏览器：

　　window.onscroll = function () {

　　　　var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;

　　　　var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;

　　　　console.log(iScrollL)

　　}