JS 浏览器对象

1.window对象

1.1 window对象

     window对象是BOM的核心、window对象指当前的浏览器窗口

     所有JavaScript全局对象 、函数以及变量均自动成为window对象的成员

     全局变量是window对象的属性

     全局函数是window对象的方法

     甚至HTML DOM的document也是window对象属性之一

1.2 window.innerHeight  浏览器窗口的内部高度

     window.innerWidth  浏览器窗口的内部宽度

 

Window.html

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <button id="btn" onclick="btnClicked()">按钮</button><br />
 9         <script>
10             document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight);
11             
12             function btnClicked(){
13                 window.open("index.html","windowname","height=200,width=200,top=100,left=100,toolbar=no,menubar=no");//打开页面设置各属性
14                 window.close();//关闭页面
15             }
16         </script>
17     </body>
18 </html>
复制代码

 

2.计时器

2.1 计时事件

      通过使用JavaScript，我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，称之为计时事件。

2.2 计时方法

      1>setInterval()  间隔指定的毫秒数不停的执行指定的代码

          clearInterval()  方法用于停止setInterval()方法执行的函数代码

      2>setTimeout()  暂停指定的毫秒数后执行指定的代码

          clearTimeout()  方法用于停止执行setTimeout()方法的函数代码

 

JiShiQi.html

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <p id="ptime"></p>
 9         <button id="btn" onclick="stopTime()">stopTime()</button><br />
10         <button id="btn" onclick="myWin()">myWin()</button><br />
11         <button id="btn" onclick="myWinXh()">myWinXh()</button><br />
12         <button id="btn" onclick="stopWin()">stopWin()</button><br />
13         <script>
14             var mytime=setInterval(function(){   //不断的执行，1秒刷新
15                 getTime()
16             },1000);
17             function getTime(){
18                 var d=new Date();
19                 var t=d.toLocaleTimeString();
20                 document.getElementById("ptime").innerHTML=t;
21             }
22             function stopTime(){      //停止执行
23                 clearInterval(mytime);
24             }
25             
26             
27             var win;
28             function myWin(){
29                 win=setTimeout(function(){    //指定3秒后弹出
30                     alert("hello");
31                 },3000);
32             }
33             
34             var winXh;
35             function myWinXh(){
36                 alert("hello");
37                 win=setTimeout(function(){    //指定3秒后循环弹出
38                     myWinXh();//自己调用自己循环
39                 },3000);
40             }
41             
42             function stopWin(){              //终止win弹出
43                 clearTimeout(win);
44             }
45             
46         </script>
47     </body>
48 </html>
复制代码

 

3.History对象

3.1 History对象

     window.history对象包含浏览器的历史(url)的集合

3.2 History方法

     history.back()  与在浏览器点击后退按钮相同

     history.firward()  与在浏览器点击向前按钮相同

     history.go()  进入历史中的某个页面

 

index.html

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <!--<a href="History.html">跳转到History</a>
 9         <button id="btn" onclick="goHistory()">goHistory()</button>
10         <script>
11             function goHistory(){
12                 history.forward();  //前进到下个页面
13             }
14         </script>-->
15         
16         
17         <a href="History.html">跳转到History</a>
18     </body>
19 </html>
复制代码

History.html

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     <!--    <button id="btn" onclick="goindex()">goindex()</button>
 9         <script>
10             function goindex(){
11                 history.back();   //后退回上一页面
12             }
13         </script>
14         -->
15         
16         <br />
17         <form>
18             <input type="text" id="username" />
19         </form>
20         <button id="btn" onclick="safe()">登录</button>
21         <script>
22             function safe(){
23                 var name=document.getElementById("username").value;
24                 if(name=="hello"){
25                     history.go(-1);     //进入前页面,当前页面为0
26                 }else{
27                     alert("输入错误");
28                 }
29             }
30         </script>
31     </body>
32 </html>
复制代码

 

4.Location对象

4.1 Location对象

     window.location对象用于获得当前页面的地址(url)，并把浏览器重定向到新的页面。

4.2 Location对象的属性

     location.hostname 返回web主机的域名

     location.psthname  返回当前页面的路径和文件名

     location.port  返回web主机的端口

     location.protocol  返回所使用的web协议(http://或https://)

     location.href  属性返回当前页面的URL

     location.assign()  方法加载新的文档

 

Location.html

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <button id="btn1" onclick="get1()">gethostname</button>
 9         <p id="p1"></p>
10         <script>
11             function get1(){
12                 document.getElementById("p1").innerHTML=window.location.hostname;
13             }
14         </script>
15         
16         <button id="btn2" onclick="get2()">getpathname</button>
17         <p id="p2"></p>
18         <script>
19             function get2(){
20                 document.getElementById("p2").innerHTML=window.location.pathname;
21             }
22         </script>
23         
24         <button id="btn3" onclick="get3()">getport</button>
25         <p id="p3"></p>
26         <script>
27             function get3(){
28                 document.getElementById("p3").innerHTML=window.location.port;
29             }
30         </script>
31         
32         <button id="btn4" onclick="get4()">gethref</button>
33         <p id="p4"></p>
34         <script>
35             function get4(){
36                 document.getElementById("p4").innerHTML=window.location.href;
37             }
38         </script>
39         
40         <button id="btn5" onclick="get5()">getassign</button>
41         <p id="p5"></p>
42         <script>
43             function get5(){
44                 location.assign("http://www.baidu.com");//方法加载新的文档
45             }
46         </script>
47         
48     </body>
49 </html>
复制代码

 

5. screen对象

5.1 Screen对象

      window.screen对象包含有关用户屏幕的信息

5.2 属性

      screen.availWidth  可用的屏幕宽度

      screen.availHeight  可用的屏幕高度

      screen.Height  屏幕高度

      screen.Width  屏幕宽度

 

Screen.html

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script>
 9             document.write("可用宽度："+screen.availWidth+",  可用高度："+screen.availHeight);
10                 document.write("<br />");
11             document.write("宽度："+screen.width+",  高度："+screen.height);
12         </script>
13     </body>
14 </html>
复制代码

 

posted @   一纸年华  阅读(1267)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示