JS window

最新推荐文章于 2022-09-28 13:22:14 发布

swimming_in_it_

最新推荐文章于 2022-09-28 13:22:14 发布

阅读量554

点赞数

分类专栏： js 文章标签： JS window 详解

本文链接：https://blog.csdn.net/swimming_in_IT_/article/details/78071068

版权

js 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

最近在学习JS，可能文档里面的东西都是我从别处拷贝和总结过来的，希望原著不要介意啊，我只是学习完了后，喜欢自己留个笔记而已，在以后不会或者遇到同样的问题自己查阅方便而已。

浏览器对象模型（BOM）是js能与浏览器对话。而且BOM目前尚无正式标准，由于现代浏览器几乎实现了js交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

1,JS Window

1)Window对象，所有的浏览器都支持window对象，它支持浏览器窗口，所有的js全局对象，函数以及变量都能自动成为window对象的成员，全局变量是window对象
的属性，全局函数是window对象的方法。甚至基于Html DOM的document也是window对象的属性之一，window.document.getElementById('demo');
等价于:document.getElementById('demo');
2)window尺寸，不同的浏览器支持不同，但是总共就这三方式。
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
3)其他的window方法：
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺寸

2，JS Screen

window.screen对象在编写时候，可以不使用window这个前缀。
screen.availWidth:可用屏幕宽度
screen.availHeight:可用屏幕高度

3，Window Location

window.location对象在编写时候，可以不使用location这个前缀。
   location.hostname:返回web主机的域名。
   location.pathname:返回当前页面的路径和文件名。
   location.port:返回web主机的端口。
   location.protocol:返回web主机的端口。
   location.href:返回当前页面的URL
   location.assign(url):加载新的文档或者新的页面。

4,Window History

window.history对象在编写的时候可以不使用window这个前缀，为了保护用户隐私，对象对js访问该对象做出了限制。
history.back():与在浏览器点击后退按钮相同
history.forward():与在浏览器中点击按钮向前相同

5,JS Navigator 对象包含有关访问者浏览器的信息。

window.navigator 对象在编写时可不使用 window 这个前缀。

对象属性：
appCodeName 	返回浏览器的代码名。
appMinorVersion 	返回浏览器的次级版本。
appName 	返回浏览器的名称。
appVersion 	返回浏览器的平台和版本信息。
browserLanguage 	返回当前浏览器的语言。
cookieEnabled 	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 	返回浏览器系统的 CPU 等级。
onLine 	返回指明系统是否处于脱机模式的布尔值。
platform 	返回运行浏览器的操作系统平台。
systemLanguage 	返回 OS 使用的默认语言。
userAgent 	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 	返回 OS 的自然语言设置。
对象方法：
javaEnabled()     规定浏览器是否启用 Java。
taintEnabled()     规定浏览器是否启用数据污点 (data tainting)。

6，Js PopupAlert，js提供的三种消息框，暂时省略。

7，Js Timing

通过js，我们有能力做到一个在设定的时间间隔之后来执行代码，而不是在函数被调用后执行，我们称之为计时事件。
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。在 JavaScritp 中
使用计时事件是很容易的，两个关键方法是:
setTimeout() 未来的某时执行代码
clearTimeout() 取消setTimeout()
eg:开始和停止计时

<html>
<head>
    <script type="text/javascript">
        var c=0
        var t
        function timedCount()
        {
            document.getElementById('txt').value=c
            c=c+1
            t=setTimeout("timedCount()",1000)
        }
        function stopCount()
        {
            c=0;
            setTimeout("document.getElementById('txt').value=0",0);
            clearTimeout(t);
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="开始计时！" onClick="timedCount()">
        <input type="text" id="txt">
        <input type="button" value="停止计时！" onClick="stopCount()">
    </form>
    <p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>
</body>
</html>

eg:使用计时器制作钟表

<html>
<head>
    <script type="text/javascript">
    function startTime()
    {
        var today=new Date()
        var h=today.getHours()
        var m=today.getMinutes()
        var s=today.getSeconds()
        // add a zero in front of numbers<10
        m=checkTime(m)
        s=checkTime(s)
        document.getElementById('txt').innerHTML=h+":"+m+":"+s
        t=setTimeout('startTime()',500)
    }
    function checkTime(i)
    {
        if (i<10)
          {i="0" + i}
          return i
    }
    </script>
</head>
<body οnlοad="startTime()">
    <div id="txt"></div>
</body>
</html>

8，JS cookies
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
eg:

<html>
<head>
    <script type="text/javascript">
    function getCookie(c_name) {
        if (document.cookie.length>0) {
              c_start=document.cookie.indexOf(c_name + "=")
              if (c_start!=-1) {
                c_start=c_start + c_name.length+1
                c_end=document.cookie.indexOf(";",c_start)
                if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
                }
          }
        return ""
    }
    function setCookie(c_name,value,expiredays) {
        var exdate=new Date()
        exdate.setDate(exdate.getDate()+expiredays)
        document.cookie=c_name+ "=" +escape(value)+
        ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }
    function checkCookie() {
        username=getCookie('username')
        if (username!=null && username!="") {
            alert('Welcome again '+username+'!')
        }
        else {
          username=prompt('Please enter your name:',"")
          if (username!=null && username!="") {
            setCookie('username',username,365)
            }
          }
    }
    </script>
</head>
<body onLoad="checkCookie()">
</body>
</html>