【JavaScript】操作BOM-CFANZ编程社区

文章目录

什么是BOM
常用浏览器对象

Window 对象

Window 尺寸
其他方法

Screen对象
Navigator对象
History对象
Location对象

JavaScript 弹窗

警告框
确认框
提示框

投票传送门

【JavaScript】操作BOM_safari

什么是BOM

BOM：Browser Object Model（浏览器对象模型），提供了独立于内容与浏览器窗口进行交互的对象。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

常用浏览器对象

对象名称	说明
window	窗口对象, 可以用来控制当前窗口, 或打开新的窗口
screen	屏幕对象, 获取屏幕相关信息
navigator	浏览器对象, 通过这个对象可以判定用户所使用的浏览器
history	历史对象, 可以用来前进或后退一个页面
location	地址对象, 可以用来获取当前URL的信息
JavaScript计时事件	在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
localStorage SessionStorage	存储对象, 可以用来存储数据, 和cookie相似, 区别是它是为了更大容量存储设计的, 在使用上也更加方便

Window 对象

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

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

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Window 尺寸</title>
</head>
<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
var h=window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>

其他方法

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

Screen对象

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

以像素计，减去界面特性，比如窗口任务栏。

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

Navigator对象

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Navigator对象</title>
  </head>
  <body>
    <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.language + "</p>";
      document.getElementById("example").innerHTML = txt;
    </script>

  </body>
</html>

运行结果：

【JavaScript】操作BOM_firefox_02

警告!!!

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

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，您可以据此识别出 Opera。

例子：if (window.opera) {…some action…}

History对象

常用方法：

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

history.back()实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <head>
      <script>
        function goBack() {
          window.history.back()
        }
      </script>
    </head>
  <body>
    <input type="button" value="Back" onclick="goBack()">
  </body>
</html>

history.forward()实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function goForward() {
        window.history.forward()
      }
    </script>
  </head>
  <body>
    <input type="button" value="Forward" onclick="goForward()">
  </body>
</html>

Location对象

一些实例	说明
location.hostname	返回 web 主机的域名
location.pathname	返回当前页面的路径和文件名
location.port	返回 web 主机的端口（80 或 443）
location.protocol	返回所使用的 web 协议（http: 或 https:）

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>location对象</title>
  </head>
  <body>
    <script>
      console.log(location.port);
      console.log(location.protocol);
      console.log(location.hostname);
    </script>
  </body>
</html>

运行结果：

【JavaScript】操作BOM_javascript_03

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

【JavaScript】操作BOM_警告框_04

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：
window.alert(“sometext”);
window.alert() 方法可以不带上window对象，直接使用alert()方法。

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function myFunction() {
        alert("你好，我是一个警告框！");
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="myFunction()" value="显示警告框" />
  </body>
</html>

运行效果：

【JavaScript】操作BOM_safari_05

确认框

确认框通常用于验证是否接受用户操作。

当确认框弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。

语法：
window.confirm(“sometext”);
window.confirm() 方法可以不带上window对象，直接使用confirm()方法。

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function myFunction() {
        var x;
        var r = confirm("按下按钮!");
        if (r == true) {
          x = "你按下了\"确定\"按钮!";
        } else {
          x = "你按下了\"取消\"按钮!";
        }
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </head>
  <body>
    <p>点击按钮，显示确认框。</p>
    <button onclick="myFunction()">点我</button>
  </body>
</html>

运行效果：

【JavaScript】操作BOM_firefox_06

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：
window.prompt(“sometext”,“defaultvalue”);
window.prompt() 方法可以不带上window对象，直接使用prompt()方法。

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function myFunction() {
        var x;
        var person = prompt("请输入你的名字", "Harry Potter");
        if (person != null && person != "") {
          x = "你好 " + person + "! 今天感觉如何?";
          document.getElementById("demo").innerHTML = x;
        }
      }
    </script>
  </head>
  <body>
    <p>点击按钮查看输入的对话框。</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>
  </body>
</html>