JavaScript浏览器对象

刺骨的言语ヽ痛彻心扉 2022-06-13 22:17 217阅读 0赞

## **window对象** ##

## 1、window对象 ##

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

## 2、window尺寸 ##

window.innerHeight——浏览器窗口的内部高度  
window.innerWidth——浏览器窗口的内部高度  
3、window方法：  
window.open():打开新窗口  
window.close():关闭当前窗口

<body>
    <button id="btn" onclick="btnOnclick()">按钮</button>
    <script> // document.write("宽度"+window.innerWidth+"，高度"+window.innerHeight); function btnOnclick() { // window.open("index02.html","window name","height = 200,width = 200 top = 100 left = 100 toolbar = yes menubar = no" ); window.close(); } </script>
    </body>

## **计时器** ##

## 1、计时事件： ##

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

## 2、计时方法 ##

1）setInterval()间隔指定的毫秒数不停地执行指定的代码  
clearInterval()方法用于停止setInterval()方法执行的函数代码

<button id="btn" onclick="stopTime()">按钮</button>
    <p id="ptime"></p>
    <script> var myTime = setInterval(function () { getTime(); }, 1000); function getTime() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("ptime").innerHTML = t; }//延时执行 function stopTime() { clearInterval(myTime); } </script>

2）setTimeout()暂停指定的毫秒数后执行指定的代码  
clearTimeout()方法用于停止执行setTimeout()方法的函数代码

<body onload="myWin()">
    <button id="btn" onclick="stopWin()">按钮</button>
    <p id="ptime"></p>
    <script> //setTimeout()暂停指定的毫秒数后执行指定的代码 var win; function myWin() { alert("hello"); win = setTimeout(function () { myWin(); },3000); }//自己调用自己执行 //clearTimeout()方法用于停止执行setTimeout()方法的函数代码 function stopWin() { clearTimeout(win); } </script>
    </body>

## **History对象** ##

## 1、History对象： ##

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

## 2、History方法： ##

history.back()：与在浏览器点击后退按钮相同  
history.forword()与在浏览器中点击按钮向前相同  
在文件index03中的部分

<body>
    <button id="btn" onclick="goCeShi()">后退</button>
    <script> function goCeShi() { history.back(); } </script>
    </body>

在ceshi中的部分

<body>
    <a href="index03.html">跳转到index03</a>
    <button id="btn" onclick="goIndex03()" >向前</button>
    <script> function goIndex03() { history.forward(); } </script>
    </body>

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

<a href="index03.html">跳转到登录页面</a>

<form>
        <input type="text" id="username">
    </form>
    <button id="btn" onclick="safe()">登录</button>
    <script> function safe() { var name = document.getElementById("username").value; if (name=="hello"){ history.go(-1); }else{ alert("输入错误") } } </script>

## **Location对象** ##

## 1、Location对象 ##

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

## 2、Location对象的属性 ##

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

<button id="btn" onclick="getLoc()">按钮</button>
        <p id="pid"></p>
        <script> function getLoc() { // document.getElementById("pid").innerHTML = window.location.href; location.assign("http://www.jikexueyuan.com"); } </script>

## **Screen对象** ##

## 1、Screen对象 ##

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

## 2、属性 ##

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

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

[https]: https: