js的window对象学习2

原创已于 2022-02-23 17:04:15 修改 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

于 2019-10-10 21:13:04 首次发布

前端专栏收录该内容

45 篇文章

订阅专栏

本文深入讲解了JavaScript中Window对象的功能，包括子窗口方法、子页面调用父页面函数、location和history属性使用、屏幕和浏览器配置属性等。通过具体实例，帮助读者掌握Window对象的关键操作。

<html>
   <head>
      <title>js的window对象学习2</title>
      <meta charset="UTF-8"/>
      <!--
         js的window对象学习
            1、子窗口方法
               window.open('子页面的资源(相对路径)','打卡方式','配置');
                  示例：window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
               注意:
                  关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。
            2、子页面调用父页面的函数
               window.opener.父页面的函数
         js的window对象的常用属性
            地址栏属性:location
               window.location.href="新的资源路径（相对路径/URL）"
               window.location.reload()重新加载页面资源
            历史记录属性
               window.history.forward() 页面资源前进，历史记录的前进。
               window.history.back()    页面资源后退，历史记录后退
               window.history.go(index) 跳转到指定的历史记录资源
                  注意window.history.go(0)相当于刷新。
            屏幕属性
               window.srceen.width;//获取屏幕的宽度分辨率
               window.screen.height;//获取屏幕的高度分辨率
            浏览器配置属性
               
            主体面板属性(document)
      -->
      <!--声明js代码域-->
      <script type="text/javascript">
         //1、子页面方法
            function testOpen(){
               window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
            }
         //2、子页面调用父页面的函数
            function testFather(){
               alert("父页面");
            }
         /*----------------------------------------------------------------------------*/
         //1、地址栏属性学习--location
            function testLocation(){
               window.location.href="http://www.baidu.com";
            }
            
            function testLocation2(){
               window.location.reload();
            }
         //2、历史记录属性
            function testHistory(){
               window.history.forward();
            }
            
            function testHistory2(){
               window.history.go(0);
            }
         //3、屏幕属性学习
            function testScreen(){
               var x=window.screen.width;
               var y=window.screen.height;
               alert(x+":"+y)
            }
         //4、浏览器配置属性
            function testNa(){
               alert(window.navigator.userAgent);
               
            }
      </script>
   </head>
   <body>
      <h3>js的window对象学习2</h3>
      <hr />
      <input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
      <hr />
      <input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" />
      <input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" />
      <br /><br />
      <input type="button" name="" id="" value="测试历史记录属性--history-前进"  onclick="testHistory();"/>
      <input type="button" name="" id="" value="测试历史记录属性--history-go"  onclick="testHistory2();"/>
      <br /><br />
      <input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" />
      <input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" />
   </body>
</html>