JavaScript基础——BOM浏览器对象模型

Window

Navigator

Location

History

Screen

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。BOM可以使我们通过js来操作浏览器

在BOM中为我们提供了一组对象，用来完成对浏览器的操作。

Window

代表的是整个浏览器的窗口，同时window也是网页中的全局对象 。重要属性如下

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

<script>window.innerHeight - 浏览器窗口的内部高度(包括滚动条)window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)window.open() - 打开新窗口window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸
</script>

Navigator

代表的当前浏览器的信息，通过该对象可以用来识别不同的浏览器。重要属性如下

<script>txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";txt+= "<p>浏览器名称: " + navigator.appName + "</p>";txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";txt+= "<p>硬件平台: " + navigator.platform + "</p>";txt+= "<p>用户代理: " + navigator.userAgent + "</p>";txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";document.getElementById("example").innerHTML=txt;
</script>

Location

代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

<script>location.hostname   //返回 web 主机的域名location.pathname   //返回当前页面的路径和文件名location.port  //返回 web 主机的端口 （80 或 443）location.protocol   //返回所使用的 web 协议（http: 或 https:
</script>

History

代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且浏览器关闭后有效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>function goBack(){window.history.back()  //history.back() 方法加载历史列表中的前一个 URL。}function goForward(){window.history.forward()  //history forward() 方法加载历史列表中的下一个 URL。}
</script>
</head>
<body><input type="button" value="Back" onclick="goBack()">  //向前<input type="button" value="Forward" onclick="goForward()">  //向后
</body>
</html>

Screen

代表用户的屏幕的信息，通过该对象可以通过获取用户的显示器的相关的信息。重要属性如下

<script>
document.write("可用宽度: " + screen.availWidth);
document.write("可用高度: " + screen.availHeight);
</script>

如果本篇博客对您有一定的帮助，大家记得留言+点赞哦。

JavaScript基础——BOM浏览器对象模型相关推荐

JavaScript - WebAPI - BOM浏览器对象模型
1.1-BOM与DOM介绍 JavaScript语言由三部分组成 ECMAJavaScript:定义了js的语法规范 Dom:document object model文档对象模型:一个HTML文档中 ...
JavaScript（七）—— BOM 浏览器对象模型
本篇为 JavaScript 系列笔记第七篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
Javascript的HTML BOM(浏览器对象模型)
Javascript的HTML BOM(浏览器对象模型) 一.Window 对象浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". Browser O ...
JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
BOM——浏览器对象模型
BOM 浏览器对象模型 BOM 的概念 • BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM 由多个 ...
BOM浏览器对象模型(Browser Object Model)
文章目录一.BOM浏览器对象模型(Browser Object Model) window对象 window对象的方法 navigator/location/history/screen对象 nav ...
JS BOM浏览器对象模型
BOM浏览器对象模型 bom概述 BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容与浏览器窗口进行交互的对象,其核心对象的window BOM由一系列相关的对象 ...
JavaScript高级程序设计第12章---BOM浏览器对象模型
第12章 BOM 本章内容: 理解BOM的核心--window 对象控制窗口及弹窗通过location 对象获取页面信息使用navigator 对象了解浏览器通过history 对象操作浏览器 ...
BOM—浏览器对象模型（Browser Object Model）
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组字符串 ... 2.BOM : 浏览器对象模型(Browser ...

JavaScript基础——BOM浏览器对象模型

Window

Navigator

Location

History

Screen

JavaScript基础——BOM浏览器对象模型相关推荐

最新文章

热门文章