BOM

最新推荐文章于 2024-12-09 18:13:36 发布

原创最新推荐文章于 2024-12-09 18:13:36 发布

· 167 阅读

0 ·

版权

javaScript 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了浏览器对象模型(BOM)的关键组成部分，包括Navigator、Screen、Location、History和Window对象的功能与使用方法，并通过实例展示了如何利用BOM实现页面跳转、获取屏幕尺寸及定时更新时间等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器对象模型（browser object model)

Navigator对象：包含有关浏览器的信息，比如
- navigator.appName返回浏览器的名称
Screen 对象：包含客户端屏幕的一些信息
- screen.width返回屏幕的宽度
- screen.height返回屏幕的高度

Location 对象：请求URL地址

location.href获取到URL地址

location.href= ;设置URL地址

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">

        function clik(){
            location.href="https://www.hao123.com/?tn=99169695_s_hao_pg";//指定跳转地址
        }

    </script>
</head>
<body>
    <input type="button" name="" onclick="clik();" value="点击跳转">
</body>
</html>

History 对象：包含用户访问过的URL记录
- length获取浏览器历史记录中的URL的数量
- back()返回历史中的前一个URL
- forward()加载历史中的下一个URL
Window对象
- 窗口对象
- 顶层对象（所有的BOM对象，都是在Window内操作的）
- 属性
  - innerwidth 窗口文档显示区宽度
  - innerheight 窗口的文档显示区高度
- 方法
  - alert(message) 在窗口中弹出对话框显示文本信息
    - message 要显示的文本
    - 参数是可选的
  - confirm(message)显示一个带有确定和取消的提示框
    - message 要显示的文本
    - 参数是可选的
    - 点击确定返回true,点击取消返回flase
    - 当用户点击确定或者取消之前，不能进行任何浏览器的输入操作。
    - Javascript代码将暂停执行，知道用户点击了确定或者取消结束了这个语句
      -
  - prompt(text,dufaultText)显示一个提示用户输入的对话框
    - text 要在对话框中显示额纯文本，非html文格式的文本
    - defaultText 默认输入的文本
    - 参数都是可选的
  - open(URL,name,feature,replace)打开一个新的浏览器窗口
    - URL表示要打开的地址
    - name表示
    - feature 表示窗口的特征
    - replace 表示true那么表示替换当前的目录，false表示创建新的条目
    - 参数是可选的，一半用前三个，第二个设置为“”；
  - close()关闭浏览器窗口，浏览器兼容性不好。
  - 做定时器的方法：
    - setTimeout(code,millis)等待mills再执行code
      - code 要执行额代码，code放在引号内
        
        code参数传递的两种情况
        code 可以是一个函数表达式，也可以是一个函数名带括号
        
        function add(){ alert("时间到了，执行函数"); } window.setTimeout("add()",1000); window.setTimeout(function(){ alert("第二次时间到了，执行函数"); },2000);
      - mills 等待的时间
    - setInterval(code,millis)每隔mills执行一次code
      - code要执行的代码，code放在引号里
      - mills间隔时间
    - clearIntervar()取消setIntervar的设置
    - clearTimeout()取消setTimeout的设置

案例：动态时间表示

要求：每隔一秒刷新一次，时间要本地格式化


<!-- 题目：动态 时间案例 -->
    <div id="in">


    </div>

    <script type="text/javascript">
        function xin(){
            // 获取本地时间
        var date = new Date();
            // 按照本地格式格式化时间
        var to = date.toLocaleString();
            // 获取要操作的节点
        var c = document.getElementById("in");
        // 给节点设置内容
        c.innerHTML = to;
        }
        // 设置每个一秒刷新一次
        window.setInterval("xin()",1000);
    </script>