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

Posted 大仲马

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从零开始学习前端JAVASCRIPT — 5JavaScript基础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(2)
        }
    </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)
  }

 

以上是关于从零开始学习前端JAVASCRIPT — 5JavaScript基础BOM的主要内容,如果未能解决你的问题,请参考以下文章

从零开始学习前端JAVASCRIPT — 1JavaScript基础

从零开始学习前端JAVASCRIPT — 6JavaScript基础DOM

从零开始学习前端JAVASCRIPT — 7JavaScript基础EVENT

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

从零开始学习前端JAVASCRIPT — 3JavaScript基础string字符串介绍

从零开始学习前端JAVASCRIPT — 14闭包与继承