window---属性与方法

外部对象：BOM和DOM

BOM：浏览器对象模型：
            提供了访问和操作浏览器各组件的方式。
            将浏览器比喻成一个对象-window(网页初始化时会自动创建)，可以通过该对象灵活的操作浏览器。
DOM：文档对象模型：
            将HTML文档比喻成一个对象，-document，可以灵活的操作网页上的内容，该对象属于window的属性之一，使用时不用             声明。提供了访问和操作HTML标记的方式。图片标记, 表格标记, 表单标记。  

1. window对象(BOM模型)：在js中表示浏览器窗口，也是JS中最大的对象, 其它对象都是它的子对象  
   Window下的属性和方法在使用的过程中，可以省略window，而直接使用属性和方法。window对象是最顶层对象, 可以省略。
         location: 地址栏
         histroy: 浏览记录
         screen: 显示器屏幕 获取屏幕的相关信息
         navigator: 浏览器软件 判断客户用的什么浏览器软件
         document: 网页

2. window方法：代码如下

<script>
    // 1. alert() 弹出一个警告对话框
    var a = window.alert('这是一个警告对话框!')
    // 没有返回值：undefined
    console.log(a)    

    // 2. prompt() 弹出一个输入对话框
    var b = window.prompt('这是一个输入对话框!')
    // 接受输入框输入的参数，点击取消返回值为：null
    console.log(b)

    // 3. confirm() 弹出一个确认对话框
    var c = window.confirm("确认删除吗?")
    // 点击"确定"按钮，返回true。其它所有的操作一律返回false。
    console.log(c)

    // 4. close() 关闭窗口
    window.close();

    // 5. print() 打印窗口
    window.print();

    // 6. open()  打开一个新的浏览器窗口
    var newWinOptions = "width = " + 400 + ", height = " + 200 + ", left = " + (screen.availWidth - 400) / 2 + ", top = " + (screen.availHeight - 200) / 2 + ", menubar = no, toolbar = no, location = no"
    var winObj = window.open("https://www.baidu.com/", "你好",newWinOptions, '_self');
    // 往新窗口输入字符串
    winObj.document.write("Hello, world!");
    // 6秒自动关闭
    winObj.setTimeout("window.close()", 6000);
</script>

<div  class="c2" onclick="window.open('pairing.html');">打开</div>
<img class="c1" src="/imgs/sj_gz.png" onclick="window.open('season_rules.html');">

<script>
    // 补充
    open(url, name, options)
       url: 显示的文件路径, 可以为空
       name: 新窗口的名字, 给<a>标记使用
       options: 新窗口的规格
          width: 新窗口的宽度
          height: 新窗口的高度
          left: 新窗口距离左边的距离
          top: 新窗口距离右边的距离
          menubar: 是否显示菜单栏
          toolbar: 是否显示工具栏
          status: 是否显示状态栏
    onload事件: 当网页加载完成, 当body标记中的所有内容都加载完成, 才触发该事件 
    // 1. url
    var newWinUrl = "";
 
    // 2. name
    var newWinName = "win2";

    // 3. options
    // 新窗口的宽度
    var newWinWidht = 400;
 
    // 新窗口的高度
    var newWinHeight = 600;
 
    // 显示屏幕的宽度
    var screenWidth = screen.availWidth;
    // document.write(screenWidth);
 
    // 显示屏幕的高度
    var screenHeight = screen.availHeight;
    // document.write(screenHeight);
 
    // 新窗口距离屏幕左边的宽度
    var x = (screenWidth - newWinWidht) / 2;
	 
    // 新窗口距离屏幕上边的宽度
    var y = (screenHeight - newWinHeight) / 2;
	 
    var newWinOptions = "width = " + newWinWidht + ", height = " + newWinHeight + ", left = " + x + ", top = " + y + ", menubar = no, toolbar = no, location = no"
	
    // 打开一个新的窗口
    // var winObj = window.open("https://www.baidu.com/", "你好",newWinOptions, '_self');
    var winObj = window.open(newWinUrl, newWinName, newWinOptions);
    
    // 往新窗口输入字符串
    winObj.document.write("Hello, world!");
 
    // 6秒自动关闭
    winObj.setTimeout("window.close()", 6000);
</script>

3. window属性：代码如下

<script>
    1. screen属性：获取客户端显示器的相关信息
    // width  属性声明了显示浏览器的屏幕的宽度，以像素计。
    console.log(screen.width)        //1920
    // height 属性声明了显示浏览器的屏幕的高度，以像素计。
    console.log(screen.height)       //1080
    // availWidth  属性声明了显示浏览器的屏幕的可用宽度，以像素计。
    console.log(screen.availWidth)   //1920
    // availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。
    console.log(screen.availHeight)  //1040
    // innerWidth: 内宽 (不含菜单栏, 工具栏, 地址栏, 状态栏)
    console.log(window.innerWidth)   //1321
    // innerHeight: 内高 (不含菜单栏, 工具栏, 地址栏, 状态栏)
    console.log(window.innerHeight)  //897
    // name: 浏览器窗口的名字
    window.name = "lisi";
    console.log(window.name)         //lisi
</script>