zoukankan      html  css  js  c++  java

  • js BOM 笔记

    浏览器对象模型 (BOM)

    文章摘自：http://www.runoob.com/

    浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

    由于现代浏览器已经（几乎）实现了 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
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <p id="demo"></p>
 9 <script>
10     var w=window.innerWidth
11     || document.documentElement.clientWidth
12     || document.body.clientWidth;
13 
14     var h=window.innerHeight
15     || document.documentElement.clientHeight
16     || document.body.clientHeight;
17 
18     x=document.getElementById("demo");
19     x.innerHTML="Browser inner window  "+w+"<br>"+"Browser inner window height: "+h;
20 </script>
21 </body>
22 </html>
    View Code

    其他 Window 方法

    一些其他方法：

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

    Window Screen

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

    一些属性：

    • screen.availWidth - 可用的屏幕宽度
    • screen.availHeight - 可用的屏幕高度
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script>
 9     document.write("Available  "+screen.availWidth+"<br>");
10     document.write("Availabe height: "+ screen.availHeight);
11 </script>
12 </body>
13 </html>
    View Code

    JavaScript Window Location

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

    Window Location

    window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

    一些实例:

    • location.hostname 返回 web 主机的域名
    • location.pathname 返回当前页面的路径和文件名
    • location.port 返回 web 主机的端口 （80 或 443）
    • location.protocol 返回所使用的 web 协议（http:// 或 https://）
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script>
 9     //document.write(location.href+"<br>");
10     //document.write(location.pathname);
11     function newDoc()
12     {
13         window.location.assign("http://www.cnblogs.com");
14     }
15 </script>
16 
17 <button type="button" value="load new document" onclick="newDoc()">click me</button>
18 </body>
19 </html>
    View Code

    JavaScript Window History

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

    Window History

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

    为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

    一些方法：

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

    Window History Back

    history.back() 方法加载历史列表中的前一个 URL。

    这与在浏览器中点击后退按钮是相同的

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         function goBack()
 8         {
 9             window.history.back();
10         }
11         function forward()
12         {
13             window.history.forward();
14         }
15     </script>
16 </head>
17 <body>
18 <input type="button" value="Back" onclick="goBack()">
19 <input type="button" value="forward" onclick="forward()">
20 </body>
21 </html>
    View Code

    JavaScript Window Navigator

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

    Window Navigator

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

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="demo"></div>
 9 
10 <script>
11     txt="<p>Browser CodeName: "+navigator.appCodeName+"</p>";
12     txt+= "<p>Browser Name: " + navigator.appName + "</p>";
13     txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
14     txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
15     txt+= "<p>Platform: " + navigator.platform + "</p>";
16     txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
17     txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
18     
19     document.getElementById("demo").innerHTML=txt;
20 </script>
21 </body>
22 </html>
    View Code

    警告!!!

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

    • navigator 数据可被浏览器使用者更改
    • 一些浏览器对测试站点会识别错误
    • 浏览器无法报告晚于浏览器发布的新操作系统

    浏览器检测

    由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

    由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

    例子：if (window.opera) {...some action...}

    JavaScript 计时事件

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

    在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

    • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    • setTimeout() - 暂停指定的毫秒数后执行指定的代码

    Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法

    setInterval() 方法

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

    语法

    window.setInterval("javascript function",milliseconds);
     

    window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。

    setInterval() 第一个参数是函数（function）。

    第二个参数间隔的毫秒数

    注意: 1000 毫秒是一秒。

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

    语法

    window.clearInterval(intervalVariable)

    window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

    要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量

    setTimeout() 方法

    语法

    window.setTimeout("javascript 函数",毫秒数);

    setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

    setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

    第二个参数指示从当前起多少毫秒后执行第一个参数

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

    语法

    window.clearTimeout(timeoutVariable)

    window.clearTimeout() 方法可以不使用window 前缀。

    要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

    myVar=setTimeout("javascript function",milliseconds);

    如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <button onclick="getTime()">get</button>
 9 <button onclick="stopTime()">stop</button>
10 <p id="demo"></p>
11 <!--
12 <script>
13     var myvar=setInterval(function(){myTime()},1000)
14     function myTime()
15     {
16         var d=new Date();
17         var t= d.toLocaleString();
18         document.getElementById("demo").innerHTML=t;
19     }
20 
21     function stopTime()
22     {
23         clearInterval(myvar)
24     }
25 </script>
26 -->
27 <script>
28     var myvar;
29     function getTime()
30     {
31         myvar=setTimeout(function (){alert("hello")},3000);
32     }
33     function stopTime()
34     {
35         clearTimeout(myvar);
36     }
37 </script>
38 </body>
39 </html>
    View Code

    JavaScript Cookies

    Cookies 用于存储 web 页面的用户信息。

    什么是 Cookies？

    Cookies 是一些数据, 存储于你电脑上的文本文件中。

    当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

    Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

    • 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
    • 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

    Cookies 以名/值对形式存储，如下所示:

    username=John Doe

    当浏览器从服务器上请求 web 页面时， 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         function setCookie(cname,cvalue,exdays)
 8         {
 9             var d=new Date();
10             d.setTime(d.getTime()+(exdays*24*60*60*1000));
11             var expires="expires="+ d.toGMTString();
12             document.cookie=cname + "=" + cvalue + ";" + expires;
13         }
14         function getCookie(cname)
15         {
16             var name=cname+"=";
17             var ca=document.cookie.split(';');
18             for (var i=0;i<ca.length;i++)
19             {
20                 var c=ca[i].trim();
21                 if (c.indexOf(name)==0) return c.substring(name.length, c.length);
22             }
23             return "";
24         }
25         function checkCookie()
26         {
27             var username=getCookie("username");
28             if (username!="")
29             {
30                 alert("welcome again"+username);
31             }
32             else
33             {
34                 username=prompt("please enter your name: ");
35                 if (username!="" && username!=null)
36                 {
37                     setCookie("username",username,365);
38                 }
39             }
40         }
41     </script>
42 </head>
43 <body onload="checkCookie()">
44 
45 </body>
46 </html>
    View Code
  • 相关阅读:
    Confluence 6 连接一个目录
    卸载 PrestaShop 1.7
    一“脚”到位-淋漓尽致的自动化部署
    从细节处谈Android冷启动优化
    视觉设计师的进化
    网易对象存储NOS图床神器
    移动端互动直播(入门篇)
    SpringBoot入门（五）——自定义配置
    SpringBoot入门（四）——自动配置
    SpringBoot入门（三）——入口类解析
  • 原文地址：https://www.cnblogs.com/whats/p/5050529.html
Copyright © 2011-2022 走看看