Javascript BOM学习小结(六)

2024-10-22 07:32:48

1、BOM简介。

　　所谓的BOM即浏览器对象模型（Browser Object Model）。BOM赋予了JS操作浏览器的能力，即window操作。DOM则用于创建删除节点，操作HTML文档。BOM尚无正式的标准，导致各浏览器对于BOM方法的支持各有不同，因此需要具体问题具体对待。

2、window对象。

　　window对象是BOM的核心，window对象指当前的浏览器窗口。所有JS全局对象、函数以及变量都属于window对象。全局变量是window对象的属性。全局函数是window对象的方法。甚至DOM的document也属于window对象的属性之一，只是大多数情况下可以忽略不写。

　　window对象方法：　　

3、窗口操作。

　　(1)、打开窗口。

　　open() 方法可用于打开新窗口。

　　语法：window.open(url, name/target, 窗口设置, replace)

　　该方法的三个参数都是可选的，默认在新页面打开一个空白页。第一个参数可设置要打开窗口的路径。第二个参数规定在何处打开新窗口，也可用于指定窗口的名称。第三个参数设置窗口参数，多个参数可用逗号分隔。如果有第一个参数，后面两个参数可省略，则在新页面打开。第二个参数一般无需设置，如果要规定窗口的参数，则必须有第二个参数，必须为'_blank'，或者用'',代替，并且距离屏幕顶部不能为0，否则失效，如果设置了左边距离，顶部可设置为0。最后一个参数规定加载到窗口的URL是在窗口的浏览历史中创建一个条目，还是替换浏览器历史中的当前条目，值为true或false，值为true时URL替换浏览历史中的当前条目，为false时URL在浏览历史中创建新的条目。

　　下表是一些常用的窗口设置参数：

　　实例：点击按钮，在新窗口打开百度首页，宽600，高400，距屏顶0像素，屏左10像素。

 <body>
 <input type="button" onClick="newWin()" value="点击我，打开新窗口!">
 <script>
 function newWin(){
   window.open('http://www.baidu.com', '_blank', 'width=,height=,top=,left=');
 }
 </script>
 </body>

　　该实例在IE下并不会打开一个自定义的窗口，而是新打开一个标签页。

　　如果在脚本中直接打开新窗口，在Chrome和FF下会被当作广告弹窗直接拦截，但是在IE下可以正常显示。360浏览器的极速模式使用的是Chrome的内核，兼容模式则使用的IE内核，360浏览器使用人群相对较多，这里就不描述了，只要其余浏览器正常运行，他就没什么问题。

 <script>
 window.open();
 window.open('http://baidu.com');
 </script>

　　实例：获得焦点和失去焦点

 <body>
 <input type="button" value="获得焦点" onclick="openWin()">
 <script>
 //确保新的窗口获得焦点：
 function openWin(){
   var oGet=window.open('', '', 'width=,height=');
   oGet.document.write('<p>我是新打开的窗口</p>');
   oGet.focus();
 }
 </script>
 <input type="button" value="失去焦点" onclick="newWin()">
 <script>
 //确保新的窗口没有获得焦点：
 function newWin(){
   var lose=window.open('', '', 'width=,height=');
   lose.document.write('<p>我是新打开的窗口</p>');
   lose.blur();
 }
 </script>
 </body>

　　实例：返回新打开窗口的名称

 <body>
 <input type="button" value="打开" onclick="openWin()">
 <script>
 function openWin(){
   var newWin=window.open('', 'newWindow', 'width=,height=');
   newWin.document.write('<p>新窗口名称：'+ newWin.name + '</p>');
 }
 </script>
 </body>

　　实例：打开新窗口向父窗口传递信息

 <body>
 <input type="button" value="打开" onclick="openWin()">
 <script>
 function openWin(){
   var newWin=window.open('', '', 'width=,height=');
   newWin.document.write("<p>关闭我之后会向父窗口输入文本信息</p>");
   newWin.focus();
   newWin.opener.document.write('<p>我是父窗口，加载完成后，向我输出内容会覆盖我所有内容</p>');
 }
 </script>
 </body>

　　实例：指定窗口大小、移动窗口和滚动内容

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 </head>
 <body>
 <br><br>
 <h>用指定像素调整窗口大小：</h>
 <input type="button" value="打开" onclick="openWin()"><br><br>
 <input type="button" value="调整" onclick="byWin()">
 <script>
 var w;
 function openWin(){
   w=window.open('', '', 'width=,height=,top=');
   w.focus();
 }
 function byWin(){
   //如果不使用框架，可使用window代替top
   w.top.resizeBy(,);
   w.focus();
 }
 </script>
 <h>将窗口的大小调整到指定的宽度和高度：</h>
 <input type="button" value="打开" onclick="newWin()"><br><br>
 <input type="button" value="调整" onclick="toWin()">
 <script>
 var w;
 function newWin(){
   w=window.open('', '', 'width=,height=');
   w.focus();
 }
 function toWin(){
   w.resizeTo(,);
   w.focus();
 }
 </script>
 <h>相对于当前位置移动新窗口：</h>
 <input type="button" value="打开" onclick="oWin()"><br><br>
 <input type="button" value="多移动几下" onclick="moveWin()">
 <script>
 var w;
 function oWin(){
   w=window.open('', '', 'width=,height=');
 }
 function moveWin(){
   w.moveBy(,);
   w.focus();
 }
 </script>
 <h>移动新窗口到指定位置：</h>
 <input type="button" value="打开" onclick="nWin()"><br><br>
 <input type="button" value="移动" onclick="moveToWin()">
 <script>
 var w;
 function nWin(){
   w=window.open('', '', 'width=,height=');
 }
 function moveToWin(){
   w.moveTo(,);
   w.focus();
 }
 </script>
 <h>由指定的像素数滚动内容：</h>
 <input type="button" style="position:fixed;top:;" onclick="scrollWin()" value="由指定的像素数滚动内容">
 <script>
 function scrollWin(){
   window.scrollBy(,);
 }
 </script>
 <h>滚动到指定内容处：</h>
 <input type="button" onclick="scrollWindow()" value="滚动到指定内容处">
 <script>
 function scrollWindow(){
   window.scrollTo(,);
 }
 </script>
 <br><br><br><br><br><br>
 </body>
 </html>

　　方法解析：

　　resizeBy(w, h)：根据指定的像素来调整窗口的大小。该方法定义指定窗口的右下角移动的像素，左上角将不会被移动(它停留在其原来的坐标)。

　　该方法有两个参数，第一个参数是必需的，指定窗口宽度增加的像素数。第二个参数可选，指定窗口高度增加的像素数。两个参数可为正数，也可为负数。

　　resizeTo(w, h)：用于把窗口大小调整为指定的宽度和高度。

　　该方法两个参数都是必需的，用来指定设置窗口的宽度和高度，以像素计。

　　moveBy(xnum, ynum)：可相对窗口的当前坐标把它移动指定的像素。

　　该方法有两个参数，第一个参数指定要把窗口右移的像素数，第二个参数指定要把窗口下移的像素数。

　　moveTo(x, y)：可把窗口的左上角移动到一个指定的坐标。

　　该方法有两个参数，第一个参数指定窗口新位置的 x 坐标，第二个参数指定窗口新位置的 y 坐标。

　　scrollBy(xnum, ynum)：可把内容滚动指定的像素数。

　　该方法有两个必需参数，第一个参数指定把文档向右滚动的像素数。第二个参数指定把文档向下滚动的像素数。

　　scrollTo(x, y)：可把内容滚动到指定的坐标。

　　该方法有两个必需参数，第一个指定要在窗口文档显示区左上角显示的文档的 x 坐标。第二个参数指定要在窗口文档显示区左上角显示的文档的 y 坐标。

　　实例：打印当前页面

 <body>
 <input type="button" value="打印当前页面" onclick="printpage()">
 <script>
 function printpage(){
   window.print();
 }
 </script>
 </body>

　　(2)、关闭窗口。

　　window.close()方法可用于关闭当前窗口。

 //点击按钮关闭当前窗口
 <input type="button" value="关闭窗口" onclick="window.close()">

　　该方法在Chrome下运行正常。IE下弹窗提示：你查看的网页正在试图关闭选项卡，是否关闭选项卡？点击否，不关闭，点击是，关闭窗口。在FF下会报错。因为在FF下不允许脚本关闭非脚本打开的窗口，也就是不能关闭一个用户自己打开的窗口，只能关闭由open打开的窗口。所以可以先用open打开，再关闭，这样就能解决FF下不能关闭的问题。这就需要创建两个文档来演示该问题：第二个文档使用上面实例保存为close.html，第一个文档如下：

 //先用open打开保存的文档，然后再点击关闭窗口按钮，效果就达到了
 <input type="button" value="打开窗口" onclick="window.open('close.html');">

　　FF浏览器的安全机制比较高，不能关闭用户打开的窗口，在网上也没找有找到什么好的办法，只能修改浏览器的默认配置，显然这是不可取的。上面的办法比较笨，另辟蹊跷不能关闭用户打开的，那就自己open一个再close，但这还是比较实在的方法，至少目的是达到了。

　　在IE下可使用下面的代码关闭当前窗口，不弹窗提示。同时也适用于Chrome。这里使用a标签在FF下可以看到报错，使用按钮则没有报错信息。

 <a href="javascript:window.opener=null;window.open('', '_self');window.close();">关闭</a>

　　实例：关闭新打开的窗口

 <body>
 <input type="button" value="打开" onclick="openWin()">
 <input type="button" value="关闭" onclick="closeWin()">
 <script>
 function openWin(){
   newWin=window.open('http://www.baidu.com', '', 'width=,height=,top=');
 }
 function closeWin(){
   newWin.close();
 }
 </script>
 </body>

　　实例：检查新窗口是否已关闭

<body>
 <input type="button" value="打开'" onclick="openWin()">
 <input type="button" value="关闭" onclick="closeWin()">
 <input type="button" value="是否关闭" onclick="checkWin()">
 <p id="p"></p>
 <script>
 var newWin;
 function openWin(){
   newWin=window.open('', '', 'width=,height=,top=');
 }
 function closeWin(){
   if(newWin){
     newWin.close();
   }
 }
 var oP=document.getElementById('p');
 function checkWin(){
   if(!newWin){
     oP.innerHTML='新窗口还没被打开！';
   }
   else{
     if(newWin.closed){
       oP.innerHTML='新窗口已关闭！';
     }
     else{
       oP.innerHTML='新窗口未关闭！';
     }
   }
 }
 </script>
 </body>

4、浏览器信息。

　　window.navigator对象获取包含有关访问者浏览器的信息。该属性在使用时可以不加window前缀。

<body>
 <div id="div"></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（启用Cookies）: ' + navigator.cookieEnabled + '</p>';
 txt+= '<p>Platform（操作平台）: ' + navigator.platform + '</p>';
 txt+= '<p>User-agent header（由客户机发送服务器的 user-agent 头部信息）: ' + navigator.userAgent + '</p>';
 txt+= '<p>User-agent language（客户机代理语言）: ' + navigator.systemLanguage + '</p>';
 document.getElementById('div').innerHTML=txt;
 </script>
 </body>

　　其中最常用的属性是navigator.userAgent，返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)，是识别浏览器的关键，可用于获取当前浏览器版本信息，判断浏览器的类型。

 <script>
 document.write(navigator.userAgent);
 </script>

　　实例：简单的判断浏览器类型

<script>
 document.write('操作平台：' + navigator.platform);
 function userBrowser(){
   var name = window.navigator.userAgent;
   //IE浏览器
   //判断IE和非IE可以使用ActiveXObject，只有IE支持该对象
   //在IE中window.ActiveXObject返回一个对象，则判断为true
   //其他浏览器都返回undefine，两个否返回false，进入或判断，也返回false
   if(!!window.ActiveXObject || 'ActiveXObject' in window){
     return 'IE浏览器';
   }
   //FF浏览器
   else if(name.indexOf('Firefox') > -){
     return 'Firefox浏览器';
   }
   //Chrome浏览器
   else if(name.indexOf('Chrome') > -){
     return 'Chrome浏览器';
   }
   //Opera浏览器
   else if(name.indexOf('Opera') > -){
     return 'Opera浏览器';
   }
   //Safari浏览器
   else if(name.indexOf('Safari') > -){
     return 'Safari浏览器';
   }
   else{
     return 'unknow';
   }
 }
 alert('浏览器类型为：' + userBrowser());
 </script>

5、页面地址。

　　window.location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面，简单说就是可以给赋值，像使用open一样。

　　语法:location.[属性|方法]

 <script>
 //当前页面URL。若中间出现乱码百分号是中文转码后的显示。
 document.write(window.location);
 </script>
 <input type="button" value="点击查看" onclick="window.location='http://www.baidu.com','_blank'">
 </body>

　　location对象其他应用：

　　(1)、location对象属性

　　　　location.hash　　设置或返回从井号(#)开始的 URL（锚）。

　　　　location.href　　设置或返回完整的 URL。

　　　　location.pathname　　设置或返回当前 URL 的路径部分。

　　　　location.host　　设置或返回主机名和当前 URL 的端口号。

　　　　location.hostname　　设置或返回当前 URL 的主机名，不包含端口。

　　　　location.port　　设置或返回当前 URL 的端口号（80 或 443）。

　　　　location.protocol　　返回所使用的 web 协议（http:// 或 https://）。

　　　　location.search　　设置或返回从问号(?)开始的 URL（查询部分）。

　　(2)、location对象方法

　　　　实例：加载一个新文档

 <input type="button" value="点击加载" onclick="newDoc()">
 <script>
 function newDoc(){
   window.location.assign('http://www.baidu.com')
 }
 </script>

实例：重新载入当前文档

 <input type="button" value="点击载入" onclick="reloadPage()">
 <script>
 function reloadPage(){
   location.reload()
 }
 </script>

实例：用新的文档替换当前文档

 <input type="button" value="点击替换" onclick="replaceDoc()">
 <script>
 function replaceDoc(){
   window.location.replace('http://www.baidu.com')
 }
 </script>

6、浏览器尺寸。

　　window.screen对象用于获取用户的屏幕信息。在使用时候可以不加window前缀。

　　(1)、屏幕分辨率的宽度和高度

　　screen.colorDepth返回用户浏览器表示的颜色位数，通常为32位（每像素的位数）。

　　screen.width和screen.height返回屏幕分辨率的宽度和高度。

 <script>
 document.write( '屏幕宽度：' + screen.width + 'px' );
 document.write('<br>');
 document.write( '屏幕高度：' + screen.height + 'px' );
 </script>

　　(2)、可用宽度和高度

　　screen.availWidth和screen.availHeight返回窗口可以使用的屏幕宽度和高度，不包括窗口任务栏。

　　不同系统的窗口任务栏默认高度不一样，任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度也不一样。

 <script>
 document.write('可用宽度：' + screen.availWidth +'px');
 document.write('<br>');
 document.write('可用高度：' + screen.availHeight +'px');
 </script>

7、工作区尺寸。

　　(1)、可视区宽度和高度。

　　获取浏览器窗口尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

　　①、IE9以上及现在浏览器都支持：

　　window.innerWidth　　获取浏览器窗口的内部宽度。

　　window.innerHeight　　获取浏览器窗口的内部高度。

　　②、对于IE9之前可以用：

　　document.documentElement.clientWidth　　表示HTML文档所在窗口的当前宽度。
　　document.documentElement.clientHeight　　表示HTML文档所在窗口的当前高度。

　　或者可以使用：

　　Document对象的body属性对应HTML文档的<body>标签

　　document.body.clientWidth　　
　　document.body.clientHeight

　　在不同浏览器都可以使用的兼容写法：

　var w = document.documentElement.clientWidth || document.body.clientWidth;
　　var h = document.documentElement.clientHeight || document.body.clientHeight;
 <script>
 //对于IE+、Chrome、Firefox、Opera 以及 Safari：
 document.write('可视宽为：'+window.innerWidth + '<br>');
 document.write('可视高为：'+window.innerHeight + '<br>'+ '<br>');
 document.write('可视宽为：'+document.documentElement.clientWidth + '<br>');
 document.write('可视高为：'+document.documentElement.clientHeight + '<br>'+ '<br>');
 //注意该方法返回的数值与其他不同
 document.write('可视宽为：'+document.body.clientWidth + '<br>');
 document.write('可视高为：'+document.body.clientHeight + '<br>'+ '<br>');
 var w= document.documentElement.clientWidth || document.body.clientWidth;
 var h= document.documentElement.clientHeight || document.body.clientHeight;
 document.write('可视宽为：'+ w +'<br>'+ '可视高为：' +h);
 </script>

　　(2)、实际网页尺寸。

　　scrollHeight和scrollWidth，获取网页内容高度和宽度。

　　scrollHeight和scrollWidth还可获取DOM元素中内容实际占用的高度和宽度。

　　在IE下scrollHeight 是网页内容实际高度，可以小于clientHeight。在FF下scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight返回 clientHeight 。

　　在不同浏览器都可以使用的兼容写法：

　　var w =document.documentElement.scrollWidth || document.body.scrollWidth;
　　var h =document.documentElement.scrollHeight || document.body.scrollHeight;

<script>
 //兼容性写法
 var w =document.documentElement.scrollWidth || document.body.scrollWidth;
 var h=document.documentElement.scrollHeight || document.body.scrollHeight;
 document.write('网页内容宽为：'+ w +'<br>'+ '网页内容高为：' +h);
 </script>

　　(3)、包含滚动条的网页尺寸。

　　offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

　　offsetHeight = clientHeight(内容可视区高度) + 滚动条 + 边框。

 <script>
 //兼容性写法
 var w = document.documentElement.offsetWidth || document.body.offsetWidth;
 var h = document.documentElement.offsetHeight || document.body.offsetHeight;
 document.write('网页内容宽为：'+ w +'<br>'+ '网页内容高为：' +h);
 </script>

　　(4)、滚动距离

　　所谓滚动距离，就是可视区距离页面顶部滚动了多远，也叫网页卷去的距离。

　　scrollTop：设置或获取位于对象最顶端与窗口中可见内容的最顶部之间的距离，也就是网页被滚动的高度。

　　scrollLeft：设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，也就是网页被滚动的宽度。

　　offsetTop：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶部位置，当前对象到其上级顶部的距离，或者距离页面顶部的距离。

　　offsetLeft：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，当前对象到其上级左端的距离，或者距离页面左端的距离。

　　offsetTop和offsetLeft不能赋值，设置对象到页面顶部的距离可用style.top属性，设置对象到页面左部的距离请用style.left属性。

　　offsetParent：页面中设置postion属性(relative、absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。该属性用于获取一个元素用于定位的父级，语法：obj.offsetParent

　　实例：滚动页面，点击页面查看滚动距离

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <script>
 //几款浏览器每次滚动，距离顶部的距离都不一样：
 //在Chrome为：-----。都是整数递进。
 //而在FF下则为：----。每次递进。
 //而在IE下则为：----。每次递进则为。
 window.onload=function (){
   document.onclick=function (){
     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
     alert(scrollTop);
   };
 };
 </script>
 </head>
 <body style="height:px">
 </body>
 </html>

　　该知识点相当重要，而且内容比较混乱，不容易理解，需要做大量练习，巩固所学。

8、浏览器历史记录。

　　window.history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退导航的功能。从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。在使用时可以不加window前缀。

　　语法：window.history.[属性|方法]

　　(1)、History 对象属性

　　历史记录不唯一，所以该对象具有length属性，可返回浏览器历史列表中的URL数量。

　　(2)、History 对象方法

　　①、history.back()　　加载 history 列表中的前一个URL，就是返回前一个页面，与浏览器点击后退按钮功能相同。

　　　　该方法等同于：history.go(-1);

　　②、history.forward()　　加载 history 列表中的下一个 URL。就是返回下一个页面，与浏览器的前进按钮功能相同。

　　　　该方法等同于：history.go(1);

　　③、history.go(num)　　根据当前所处的页面，加载 history 列表中的某个具体的页面。

　　　　参数说明：1为前一个，go(1)等价forward()。0为当前页面。-1下一个页面，后一个，go(-1)等价back()。

　　　　也可为其他数值，指定要访问的URL在History的URL列表中的相对位置。

　　　　比如：history.go(-2);　　返回当前页面之前浏览过的第二个历史页面，相当于点击2次后退按钮。

　　　　history.go(3);　　返回当前页面之后浏览过的第三个历史页面。

9、Cookie

　　Cookie 用于存储 web 页面的用户信息。就是一些数据，比如自动登录和记住用户名，存储在用户电脑上的文本文件中，方便再次使用。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息"：当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

　　cookie是以域名为单位的，同一个网站中所有页面共享一套cookie，一般不会超过50条，大小为4k-10k左右。限制数量和存储大小，这样也阻止了恶意网站给cookie中恶意存储，不然一会计算机硬盘就满了。cookie也是有过期时间的，比如网页中的自动登录，有些为2周内，有些为1周内，当然过期时间是可以自行定义的，用户也可以自行清理。

　　在JS中使用cookie很简单，就是document.cookie　　该属性可用来创建、读取和删除cookie。

　　语法：名称=值

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

　　提示：跟cookie相关的本地测试最好都用FF，只有FF会保存本地的cookie，其他浏览器都不会保存。在IE下也可以测试。

　　FF下查看方法：可点击页面右键 - 查看页面信息 - 安全 - 查看cookie，空白的文件夹就是本地的cookie。

(1)、创建和读取cookie

　　默认情况下，cookie属于当前页面并在浏览器关闭时删除。

　　ccokie中的=不是赋值，而是添加，可多次添加，并不会发生后面将前面覆盖的情况。

　　expires：有效日期，用于指定cookie的过期时间。如过不设置，浏览器关闭时cookie就被删除了。

　　path：可用于设置cookie的路径。

　　cookie可直接被读取，或者存储与变量中。

　　document.cookie 将以字符串的方式返回所有的cookie，格式： cookie1=value; cookie2=value; cookie3=value;

实例：创建用户登录信息，设置2周后过期，并读取cookie

 <script>
 var oD=new Date();
 //从当天起天也就是周后是几号
 oD.setDate(oD.getDate()+);
 //设置过期时间周。可在查看cookie中看到user的过期时间为周后
 document.cookie='user=小白;expires='+oD;
 //浏览器关闭删除本条cookie。pass的过期时间为在会话结束时。
 document.cookie='pass=';
 //读取cookie
 alert(document.cookie);
 </script>

(2)、修改cookie

　　修改cookie类似于创建cookie，新的cookie会覆盖旧的cookie，其实并不能说是被覆盖了，而是新的cookie 将被添加到 document.cookie 中显示。

<script>
 var oD=new Date();
 oD.setDate(oD.getDate()+);
 document.cookie='user=小白;expires='+oD;
 document.cookie='pass=';
 //可在查看cookie中看到user和pass的内容都被新的cookie替换了
 document.cookie='user=小明;expires='+oD;
 document.cookie='pass=';
 //读取cookie
 alert(document.cookie);
 </script>

(3)、删除cookie

　　删除 cookie 非常简单。只需要设置 expires 参数为以前的时间即可，也就是设置为-1，昨天过期，浏览器一看这不是昨天就过期么，直接删除。

下面是设置、获取和删除cookie的封装函数，方便以后使用。

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>Cookie封装函数</title>
 </head>
 <body>
 <script>
 //设置cookie
 //参数:cookie的名字，参数：cookie的值，参数：cookie过期时间
 function setCookie(name, value, iDay){
  var oDate=new Date();
  oDate.setDate(oDate.getDate()+iDay);
  document.cookie=name+'='+value+'; expires='+oDate;
 }
 //userName一年后过期，passWord两周后过期。
 setCookie('userName', '小白', );
 setCookie('passWord', '', );
 //获取cookie
 //参数为cookie的名称
 function getCookie(name){
   //用字符串将cookie分割，注意要用：默认的cookie样式，分号加空格。
   var arr=document.cookie.split('; ');
   for(var i=;i<arr.length;i++){
     //默认字符串显示为：a=; b=; c=
     //所以用等号再做一次分隔
     var result=arr[i].split('=');
     //result的第一位存名称
     //如果第一位等于name，就说明找到想要的了,就返回第二位的值。
     if(result[]==name){
       //result的第二位存值
       return result[];
     }
   }
   //如果没有cookie就返回一个空字符串。比如有些用户是第一次进入网站，就没有产生cookie。
   return '';
 }
 //获取cookie中passWord的值
 alert(getCookie('passWord'));
 //参数为删除哪条cookie
 function removeCookie(name){
   //参数：cookie的值，表示随便一个。参数：昨天过期，立马删除。
   setCookie(name, , -);
 }
 //将cookie中userName和passWord删除。
 //在点击查看页面信息，之前保存的cookie就不存在了。
 removeCookie('userName');
 removeCookie('passWord');
 </script>
 </body>
 </html>

　　(4)、cookie小应用：记住上一次的用户名

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>记住上一次的用户名</title>
 <script>
 function setCookie(name, value, iDay){
   var oDate=new Date();
   oDate.setDate(oDate.getDate()+iDay);
   document.cookie=name+'='+value+'; expires='+oDate;
 }
 function getCookie(name){
   var arr=document.cookie.split('; ');
   for(var i=;i<arr.length;i++){
     var result=arr[i].split('=');
     if(result[]==name){
       return result[];
     }
   }
   return '';
 }
 function removeCookie(name){
   setCookie(name, , -);
 }
 window.onload=function (){
   var oForm=document.getElementById('form');
   var oUser=document.getElementsByName('user')[];
   //在点击提交按钮时发生的事件
   oForm.onsubmit=function (){
     //创建一个cookie，值为用户名输入的值，天后过期
     setCookie('user', oUser.value, );
   };
   //用户名的值为获取cookie中的user
   oUser.value=getCookie('user');
 };
 </script>
 </head>
 <body>
 //index.html为本文档文件名
 <form id="form" action="index.html">
   用户名：<input type="text" name="user"><br>
   密　码：<input type="password" name="pass"><br>
   <input type="submit" name="" value="登录">
 </form>
 </body>
 </html>

window的六大属性，同时它们也是对象：

document主要操作web加载的网页文档；

frames为窗口框架对象数组；

history保存用户上网记录；

location提供加载的文档有关信息以及控制页面跳转；

navigator对象存储浏览器名称及版本信息；

screen显示屏幕相关信息。

其中document对象属性下也有几个重要的属性对象，以document为核心的对文档进行操作的各个对象组成的结构便是大家所熟悉的DOM，从这一点看来，DOM其实是BOM的一个子集.

window对象除了提供了旗下的六大对象属性外，还拥有设置浏览器信息的一些基本属性，主要如下

Javascript之BOM(window对象)详解

ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变
实现JavaScript的组成----BOM和DOM详解

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在
javascript的BOM汇总

setTimeout() //延时器,只执行一次代码 clearTimeout() //清除演示器 setIntervla() //定时器,根据指定时间间隔执行一次代码 clearInterval() //清除定时器 window.history.length //访问的历史页面的数目 window.history.forward() //前一页 window.history.back(); //后一页 window.history.go(-1); //跳转至曾经访问过的某个页面,负值表示向后跳
Javascript基础知识（三）BOM，DOM总结

window对象: 打开和关闭窗口: window.open() 三个参数:1.载入新窗口的页面的URL 2.新窗口的名字 3.特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值. window.close() 系统对话框: 1.alert("hello world!"); 2.confirm("Are you sure?");---选择 3.prompt("你的名字是说明?",""); 时间间隔 setT
javascript bom是什么及bom和dom的区别

什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分在BOM章节中你将学到什么 BOM教程中,同学们将学到与浏览器窗口交互的一些对
PHP中遇到BOM、<feff>编码导致json_decode函数无法解析问题

昨天同事遇到一个奇怪的问题,就是以下代码,无法通过JSON校验,也无法通过PHP的json_decode函数解析. 复制代码代码如下: [ { "title": "", "pinyin": "" } ] 可能聪明的你已经猜到其中包含有不看见的特殊字符,在vim下查看: 复制代码代码如下: [ { <feff>"title&quo
Node.js实现批量去除BOM文件头

之前的同事写了一个工具,但有bug,就是在替换文件后原文件的格式变成utf8 BOM了,这种带BOM的XML在Mac下可能读取不出来,所以就需要写个工具处理一下. 其实思路比较简单,首先遍历目录,然后读取目录,将文件头三个字节去除掉,然后保存为utf-8格式的文件即可,直接上代码吧 :) 复制代码代码如下: var fs = require('fs'); var path = "目标路径.."; function readDirectory(dirPath) { if (fs
javascript学习笔记（三）BOM和DOM详解

js组成我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM
javascript中BOM基础知识总结

一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window: BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分. 二.学习BOM学什么我们将学到与浏览器窗口交互的一些对象,例如
JavaScript 浏览器对象模型BOM使用介绍

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准; 一 window对象 // BOM的核心对象是window,它表示浏览器的一个实例; // window对象处于JavaScript结构的最顶层; // 对于每个打开的窗口,系统都会自动为其定义window对象; // window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局

Javascript BOM学习小结(六)

相关推荐

随机推荐