BOM的介绍

JavaScript基础分为三个部分:

 

什么是BOM

BOM:Browser Object Model,浏览器对象模型。

BOM的结构图:

javascript-BOM操作

从上图也可以看出:

  • window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。

  • DOM是BOM的一部分。

window对象:

  • window对象是JavaScript中的顶级对象

  • 全局变量、自定义函数也是window对象的属性和方法。

  • window对象下的属性和方法调用时,可以省略window。

BOM 的常见内置方法和内置对象

window对象

弹出系统对话框

比如说,alert(1)window.alert(1)的简写,因为它是window的子方法。系统对话框有三种:

alert();    //不同浏览器中的外观是不一样的
confirm();  //兼容不好
prompt();   //不推荐使用

打开窗口、关闭窗口

1、打开窗口:
window.open(url,target)

//url:要打开的地址。
//target:新窗口的位置。可以是:_blank 、_self、 _parent 父框架。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--行间的js中的open() window不能省略-->
        <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
        
        <button>打开百度</button>
        <button onclick="window.close()">关闭</button>
        <button>关闭</button>
        
    </body>
    <script type="text/javascript">
        
        var oBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3];
        
        oBtn.onclick = function(){
                      //open('https://www.baidu.com')
            
            //打开空白页面
            open('about:blank',"_self")
        }
        closeBtn.onclick = function(){
            if(confirm("是否关闭?")){
                close();
            }
        }
        
    </script>
</html>
示例

相关文章:

  • 2021-10-13
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-06-07
  • 2021-08-04
相关资源
相似解决方案