JavaScript基础学习第六天

最新推荐文章于 2025-03-17 22:42:04 发布

翻译最新推荐文章于 2025-03-17 22:42:04 发布 · 183 阅读

文章标签：

#JavaScript #浏览器对象

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文围绕JavaScript的浏览器对象展开，介绍了BOM核心Window对象，包括其成员、尺寸及方法；还阐述了计时器的计时事件和方法，以及History、Location、Screen对象的功能、属性和方法，如History对象可操作浏览器历史，Location对象能获取和重定向URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS浏览器对象

1-window

Window对象 : 是BOM的核心，指当前的浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一

Window尺寸：
Window.innerHeight – 浏览器窗口的内部高度
Window.innerWidth - 浏览器窗口的内部宽度

Window方法：
Window.open() - 打开新窗口
Window.close() - 关闭窗口

<script>
       function btnClick()
       {
         window.open("HTMLPage1.htm","windowname","height=200,width=200,top =100,left =100,toolbar =no,menubar =no");
         //window.close();
       }
       document.write("宽度：" + window.innerWidth + ",高度：" + window.innerHeight);
</script>

2-计时器

计时事件：通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，称之为计时事件。
计时方法：
1.setInterval() – 间隔指定的毫秒数不停地执行指定的代码
2 clearInterval() – 用于停止setInterval() 方法执行的函数代码
3 setTimeout() – 暂停指定的毫秒数后执行指定的代码
4 clearTimeout() –方法用于停止setTimeout() 方法的函数代码

<script>
       var mytime = setInterval( function(){ getTime();},1000)      
       function getTime()
       {
          var d = new Date();
          var t = d.toLocaleTimeString();
          document.getElementById("pID").innerHTML =t;
       }
       function stopTime()
       {
          clearInterval(mytime());
       }

       var win;
       function mywin()
       {
           alert("hello");
           win = setTimeout(function(){mywin()},3000);  //延迟3s 重复执行
           
       }
       function stopwin()
       {
           clearTimeout(win);
       }
</script>

3-History对象

window.history 对象包含浏览器的历史（url）的集合
方法：

history.back() – 与浏览器点击后退按钮相同
history.forward() – 与浏览器中点击按钮向前相同
history.go() – 进入历史中的某个页面

<script>
     function goBack() //跳转到前一个界面
     {
        history.back();
     }
</script>

4-Location对象

windows.location 对象用于获得当前的地址（URL），并把浏览器重定向到新的页面。
Location对象的属性：

location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议（http:// 或 https://）
location.href 属性返回当前页面的URL
location.assign() 方法加载新的文档

<script>
 function getLoc()
       {
           //document.getElementById("pID").innerHTML = window.location.hostname;
           //document.getElementById("pID").innerHTML = window.location.pathname;
           //document.getElementById("pID").innerHTML = window.location.port;
           //document.getElementById("pID").innerHTML = window.location.protocol;
           //document.getElementById("pID").innerHTML = window.location.href;     
           location.assign("http://www.hao123.com");
            
       }
</script>

5-Screen对象

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

screen.availWidth –可用的屏幕宽度
screen.availHeight – 可用的屏幕高度
screen.Height - 屏幕高度
screen.Width - 屏幕宽度

     document.write("可用高度：" + screen.availHeight + "可用宽度：" + screen.availWidth);
     document.write("高度：" + screen.height + "宽度：" + screen.width);