javaScript-BOM

guardwhy

于 2021-04-22 22:52:59 发布

阅读量137

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/hxy1625309592/article/details/116034710

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.1 BOM基本定义

Browser Object Mode浏览器对象模型，操作浏览器中各种对象。

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

Window 对象是BOM中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。

1.2 Window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

1.3 BOM 基本属性

显示区域的高度和宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>显示区域的高度和宽度</title>
</head>
<body>
<script>
  document.write("文档内容");
  document.write("文档显示区域的宽度"+window.innerWidth);
  document.write("<br>");
  document.write("文档显示区域的高度"+window.innerHeight);
</script>
</body>
</html>

执行结果

窗体的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>窗体的宽度和高度 </title>
</head>
<body>
<script type="text/javascript">
  document.write("浏览器的宽度:"+window.outerWidth);
  document.write("<br>");
  document.write("浏览器的高度:"+window.outerHeight);
</script>
</body>
</html>

执行结果

浏览器离屏幕的距离

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浏览器离屏幕的距离</title>
</head>
<body>
<script type="text/javascript">
  // 浏览器离屏幕左边的距离
  console.log(window.screenLeft);
  // 浏览器离屏幕上边的距离
  console.log(window.screenTop);
</script>
</body>
</html>

执行结果

打开新窗口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>openNewWindow</title>
  <script>
    function openNewWindow(){
      myWindow=window.open("https://www.imooc.com/");
    }
  </script>
</head>
<body>
<button onclick="openNewWindow()">打开一个新的窗口</button>
</body>
</html>

执行结果

1.4 Navigator对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navigator</title>
</head>
<body>
<script type="text/javascript">
  // Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
  let agent = window.navigator.userAgent;
  // 条件判断
  if(/chrome/i.test(agent)){
    console.log("当前是谷歌浏览器");
  }else if(/firefox/i.test(agent)){
    console.log("当前是火狐浏览器");
  }else if(/msie/i.test(agent)){
    console.log("当前是低级IE浏览器");
  }else if("ActiveXObject" in window){
    console.log("当前是高级IE浏览器");
  }
</script>
</body>
</html>

执行结果

1.5 Location对象

Location:代表浏览器地址栏的信息,通过Location能设置或者获取当前地址信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>location</title>
</head>
<body>
<button id=div1>跳转页面</button>
<button id="div2">刷新页面</button>
<script type="text/javascript">
  	/*跳转页面*/
  div1.onclick = function(){
    location.href = "https://www.baidu.com"
  };
  	/*刷新页面*/
  div2.onclick = function(){
	location.reload();
  };
</script>
</body>
</html>

执行结果

9.6 History对象

History: 代表浏览器的历史信息, 通过History来实现刷新/前进/后退。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>history</title>
</head>
<body>
<h3>第一个界面</h3>
<button id="btn1">前进</button>
<button id="btn2">刷新</button>
<a href="09-history.html">新的页面</a>

<script type="text/javascript">
  // History:代表浏览器的历史信息, 通过History来实现刷新/前进/后退
  let oBtn1 = document.querySelector("#btn1");
  let oBtn2 = document.querySelector("#btn2");

  /*
    注意点:
    只有当前访问过其它的界面, 才能通过forward/go方法前进
    如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
  */
  oBtn1.onclick = function (){
    // window.history.forward();
	window.history.go(1);
  }
  // 刷新:如果给go方法传递0,就代表刷新
  oBtn2.onclick = function (){
    window.history.go(0);
  }
</script>
</body>
</html>

代码示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09-history</title>
</head>
<body>
<h3>新的页面</h3>
<button id="btn1">后退</button>
<script type="text/javascript">
  // History:代表浏览器的历史信息,通过History来实现刷新/上一步/下一步
  let oBtn1 = document.querySelector("#btn1");
  /*
   注意点:
   只有当前访问过其它的界面, back/go方法后退
   如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面
   */

  // 后退
  oBtn1.onclick = function (){
    // window.history.back();
	window.history.go(-1);
  }
</script>
</body>
</html>

执行结果

1.7 JavaScript 弹窗

1.7.1 警告框(alert)

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

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>警告框</title> 
</head>
<body>
	<div id='div1'>go</div>
	<script type="text/javascript">
		div1.onclick = function(){
			alert(1)
		};
	</script>
</body>
</html>

1.7.2 确认框(confirm)

确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。

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

执行结果

1.7.3 提示框(prompt)

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

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

guardwhy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript-BOM

1.1 BOM基本定义Browser Object Mode浏览器对象模型，操作浏览器中各种对象。浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。Window 对象是BOM中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。1.2 Window对象所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是
复制链接

扫一扫