JS Window

2016-12-20 本文已影响33人 hx永恒之恋

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

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

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例

var w=window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

var h=window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;

亲自试一试
该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

其他 Window 方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

分割线

JavaScript Window Screen

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

Window Screen

window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：

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

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

实例
返回您的屏幕的可用宽度：

<script>
  document.write("可用宽度：" +screen.availWidth);
</script>

以上代码输出为：

可用宽度：1920

亲自试一试

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

实例
返回您的屏幕的可用高度：

<script>
  document.write("可用高度：" +screen.availHeight);
</script>

以上代码输出为：

可用高度：1040

亲自试一试

分割线

JavaScript Window History

window.history 对象包含浏览器的历史。

Window History

window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

Window History Back

history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的：

实例
在页面上创建后退按钮：

<html>
  <head>
    <script>
      function goBack() {
        window.history.back()
      }
    </script>
  </head>
  <body>
    <input type="button" value="Back" onclick="goBack()">
  </body>
</html>

以上代码输出为：

转到上一页

Window History Forward

history forward() 方法加载历史列表中的下一个 URL。
这与在浏览器中点击前进按钮是相同的：

实例
在页面上创建一个向前的按钮：

<html>
  <head>
    <script>
      function goForward() {
        window.history.forward()
      }
    </script>
  </head>
  <body>
    <input type="button" value="Forward" onclick="goForward()">
  </body>
</html>

以上代码输出为：

转到下一页

分割线

JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

Window Navigator

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

实例

  <div id="example"></div>

  <script>
    txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
    txt+= "<p>Browser Name: " + navigator.appName + "</p>";
    txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
    txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>Platform: " + navigator.platform + "</p>";
    txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
  </script>

亲自试一试
警告：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。
例子：if (window.opera) {...some action...}

分割线

JavaScript 消息框（JS PopupAlert）

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

实例
警告框：alert("我是警告框！！")
带有折行的警告框：alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")
确认框：confirm("Press a button!");
提示框：prompt("请输入您的名字","Bill Gates")

警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("文本")

确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("文本")

提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("文本","默认值")

分割线

JavaScript 计时（JS Timing）

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

实例
简单的计时
单击本例中的按钮后，会在 5 秒后弹出一个警告框。
另一个简单的计时
本例中的程序会执行 2 秒、4 秒和 6 秒的计时。
在一个无穷循环中的计时事件
在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。
带有停止按钮的无穷循环中的计时事件
在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。
使用计时事件制作的钟表
一个 JavaScript 小时钟

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

setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示：1000 毫秒等于一秒。

实例
当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。

<html>
  <head>
    <script type="text/javascript">
      function timedMsg() {
        var t=setTimeout("alert('5 seconds!')",5000)

      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" value="Display timed alertbox!" onClick="timedMsg()">
    </form>
  </body>
</html>

实例 - 无穷循环
要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。

<html>
  <head>
    <script type="text/javascript">
      var c=0var tfunction timedCount() { 
        document.getElementById('txt').value=c 
        c=c+1
        t=setTimeout("timedCount()",1000)
      }
    </script>
  </head>  
  <body>
    <form>
      <input type="button" value="Start count!" onClick="timedCount()">
      <input type="text" id="txt">
    </form>
  </body>
</html>

clearTimeout()
语法
clearTimeout(setTimeout_variable)

实例
下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：

<html>
  <head>
    <script type="text/javascript">
      var c=0var tfunction timedCount() { 
        document.getElementById('txt').value=c 
        c=c+1
        t=setTimeout("timedCount()",1000)
      }

      function stopCount() {
        clearTimeout(t)
      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" value="Start count!" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="Stop count!" onClick="stopCount()">
    </form>
  </body>
</html>

分割线

JavaScript Cookies

cookie 用来识别用户。

实例
创建一个欢迎 cookie
利用用户在提示框中输入的数据创建一个 JavaScript Cookie，当该用户再次访问该页面时，根据 cookie 中的信息发出欢迎信息。

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

有关cookie的例子：

名字 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie

当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

创建和存储 cookie
在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。
首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数：

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())
}

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。
在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。
之后，我们要创建另一个函数来检查是否已设置 cookie：

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 ""
}

上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。

最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。

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) 
    } 
  }
}

这是所有的代码：

<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>

JS Window

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM)

Window 对象

Window 尺寸

其他 Window 方法

JavaScript Window Screen

Window Screen

Window Screen 可用宽度

Window Screen 可用高度

JavaScript Window History

Window History

Window History Back

Window History Forward

JavaScript Window Navigator

Window Navigator

JavaScript 消息框（JS PopupAlert）

JavaScript 计时（JS Timing）

JavaScript Cookies

有关cookie的例子：

猜你喜欢

热点阅读