前端基础:JavaScript BOM对象

JavaScript BOM对象

JavaScript Window - 浏览器对象模型

浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话"。
浏览器对象模型(BOM)
浏览器对象模型(Browser Object Model:BOM)尚无正式标准,由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。

Window对象
所有浏览器都支持window对象,它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动称为window对象的成员。全局变量是window对象的属性,全局函数是window对象的方法,甚至HTML DOM的document也是window对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

Window尺寸
有三种方法能够确定浏览器窗口的尺寸,对于IE、Chrome、FireFox、Opera语句Safari:

  • window.innerHeight:浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth:浏览器窗口的内部宽度(包括滚动条)

对于IE8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElemetn.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的JavaScript方案(涵盖所有浏览器):

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

其他Window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

widow.screen对象包含有关用户屏幕的信息。
Window Screen
window.screen对象在编写时可以不使用window这个前缀,其属性有:

  • screen.availWidth:可用的屏幕宽度
  • screen.availHeight:可用的屏幕高度

Window Screen 可用宽度
screen.availWidth属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏:

<script>
document.write("可用宽度: " + screen.availWidth);            // 返回屏幕可用宽度:1920
</script>

Window Screen 可用高度
scree.availHeight属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏:

<script>
document.write("可用高度: " + screen.availHeight);            // 返回屏幕可用高度:1040
</script>

JavaScript Window Location

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

Window Location
window.location对象在编写时可不使用window这个前缀,如下例子:

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

Window Location Href
location.href属性返回当前页面的URL:

<script>
document.write(location.href);            // 返回当前页面的整个URL:https://www.baidu.com/
</script>

Window Location Pathname
location.pathname属性返回URL的路径名:

<script>
document.write(location.pathname);            // 返回当前URL的路径名:/
</script>

Window Location Assign
location.assign()方法加载新的文档:

<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.w3cschool.cc");            // 加载一个新的文档
  }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html>

JavaScript Window History

window.history对象包含浏览器的历史。

Window History
window.history对象在编写时可不使用window这个前缀,为了保护用户隐私,对JavaScript访问该对象的方法做出了限制:

  • history.back():与在浏览器中点击后退按钮相同;
  • history.forward():与在浏览器中点击向前按钮相同;

Window History Back
history.back()方法加载历史列表中的前一个URL,这与在浏览器中点击后退按钮是相同的:

<html>
<head>
<script>
function goBack()
  {
  window.history.back();                // 在页面上创建后退按钮
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

Window History Forward
history.forward()方法加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的:

<html>
<head>
<script>
function goForward()
  {
  window.history.forward();                // 在页面中创建一个向前的按钮
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

JavaScript Window Navigator

window.navigator对象包含有关访问者浏览器的信息。

Window Navigator
window.navigator对象在编写时可不使用window这个前缀:

<div id="example"></div>
<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> 

警告
来自navigator对象的信息有误导性,不应该被用于检测浏览器版本,这是因为:

  • navigator数据可以被浏览器使用者更改;
  • 一些浏览器对测试站点会识别错误;
  • 浏览器无法报告晚于浏览器发布的新操作系统;

浏览器检测
由于navigator可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象,我们可以使用对象来检测浏览器。例如:由于只有Opera支持属性"window.opera",可以据此识别出Opera。

if (window.opera) {...some action...}

JavaScript 弹窗

猜你喜欢

转载自www.cnblogs.com/love9527/p/9106177.html