Js外部对象---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>

<script>
    2. location对象：表示浏览器上地址栏的信息。
    // 完整的url
    var a = window.location.href
    console.log(a)   //结果：http://127.0.0.1:8081/admin/test/tasks
    // 协议
    var b = window.location.protocol
    console.log(b)   //结果：http:
    // 主机名
    var c = window.location.hostname
    console.log(c)   //结果：127.0.0.1
    // 端口号
    var d = window.location.port
    console.log(d)   //结果：8081
    // 主机名+端口号
    var e = window.location.host
    console.log(e)   //结果：127.0.0.1:8081
    // 当前URL的路径部分
    var f =window.location.pathname
    console.log(f)   //结果：/admin/test/tasks
    // 附加：url: window.location.pathname,


    // hash：    设置或返回从井号 (#) 开始的 URL（锚）。
    // search：  设置或返回从问号 (?) 开始的 URL（查询部分）。
    // location.origin：协议名、主机名和端口号
    // BOM（浏览器对象模型）中最有用的对象之一就是location，它是window对象和document对象的属性。location对象表示载入窗口的URL，此外，它还可以解析URL：
    // window.location和document.location是等价的，可以交互使用。


    // href属性： 表示当前窗口中正在浏览的网页的地址。如果为href赋值，相当于实现网页跳转功能
    window.location.href = "http://www.sunchis.com";
    window.location.href = '/admin/drill/questions';
    window.location.href = window.location.href
    window.location.href = window.location.pathname+"?page="+page;
    window.location.assign("http://www.sunchis.com");
    window.location.replace("http://www.sunchis.com");
    // replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
    // location.replace(location.href)
    // 促使浏览器根据 URL 参数中给出的地址 (URL) 下载页面，同时在当前浏览器存储的历史记录 (即所浏览过的页面的列表) 中使用新的地址(即此方法中的 URL 参数) 覆盖当前的页面。
    // 使用 replace() 方法意味着用户将不能通过按 “返回” 按钮回到前边浏览过的那个页面，但这并不是说用户完全不能回到原来的所有页面，他们只不过是无法回到被 replace() 方法替换的那一个页面 (注意：只是被替换的那一个页面)。


    // reload()方法：重新加载当前网页，相当于刷新
    // reload()方法有两种模式，即从浏览器的缓存中重载，或从服务器端重载。
    // 究竟采用哪种模式由该方法的参数决定。无参数：从缓存中载入页面，如果参数省略，默认值为false。
    // false：从缓存中重新载入页面；
    // true：从服务器重新载入页面；
    window.location.reload();


    window.location.reload()与window.location.href=window.location.href区别:
    // 两者都能刷新窗口，不同的是，
    // 前者强制刷新页面，从服务器重新请求！促使浏览器重新下载当前的页面。刷新页面时若有数据提交会提示是否提交数据(是和否选项)，就是我们经常看到的那个讨厌的提示框。
    // 后者则不会，是定向url提交数据。所以在刷新页面时最好是用后者。
    // 在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。
</script>

<!--测试效果一样。表单没有提交。-->
<a onclick="javascript:window.location.href=window.location.href;">
<a onclick="javascript:window.location.reload();">
<!--都提交数据-->
<input type="submit" onclick="javascript:window.location.reload();" value="单击" id="btnVCode" />
<input type="submit" onclick="javascript:window.location.href=window.location.href;" value="单击" id="btnVCode" />