javascript教程5:--BOM操作

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量87 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wu-chao/p/8514318.html
版权

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 对象方法：

方法描述
alert()弹出带有文本消息和一个确认按钮的警告框
prompt()弹出可提示用户输入的对话框
confirm()confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
open()打开一个新的浏览器窗口　　　　
close()关闭浏览器窗口
print()打印当前窗口的内容
focus()把键盘焦点给予一个窗口
blur()把键盘焦点从顶层窗口移开
moveBy(xnum, ynum)相对窗口的当前坐标将对象移动指定的像素
moveTo(x, y)把窗口的左上角移动到一个指定的坐标
resizeBy(w, h)按照指定的像素调整窗口的大小
resizeTo(w, h)将窗口的大小调整到指定的宽度和高度
scrollBy(xnum, ynum)按照指定的像素值来滚动内容
scrollTo(x, y)将内容滚动到指定的坐标
setInterval()每隔指定的时间执行代码
setTimeout()在指定的延迟时间之后来执行代码
clearInterval()取消 setInterval() 的设置
clearTimeout()取消 setTimeout() 的设置

 

     1)prompt()　定义和用法

       　　 prompt() 方法用于显示可提示用户进行输入的对话框。　

　　　　语法

　　　　prompt(text,defaultText)
参数描述
text可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText

可选。默认的输入文本。

　　说明

 

　　　如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

 

　　　　在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

<html>
<head>
<meta charset='utf-8'/>
<script>
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Bill Gates")
  if (name!=null && name!="")
    {
    document.write("你好，" + name + "！今天过得好吗？")
    }
  }
</script>
</head>
<body>

<input type="button" onclick="disp_prompt()" value="显示一个提示框" />

</body>
</html>

      2)confirm()

　　confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

　　

　　说明

　　如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

　　在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

　　

 1 <html>
 2 <head>
 3  <meta charset="UTF-8">
 4 <script type="text/javascript">
 5 function disp_prompt()
 6   {
 7   var name=prompt("Please enter your name","")
 8   if (name!=null && name!="")
 9     {
10     document.write("Hello " + name + "!")
11     }
12   }
13 </script>
14 </head>
15 <body>
16 
17 <input type="button" onclick="disp_prompt()"
18 value="Display a prompt box" />
19 
20 </body>
21 </html>
View Code

　　 3)setInterval()　　

　　定义和用法

　　setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

　　语法

　　setInterval(code,millisec[,"lang"])
参数描述
code必需。要调用的函数或要执行的代码串。
millisec必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

　　返回值

　　一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

　　

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>

</body>
</html>
View Code

　　4)setTimeout()

　　定义和用法

　　setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

　　语法

　　setTimeout(code,millisec)
参数描述
code必需。要调用的函数后要执行的 JavaScript 代码串。
millisec必需。在执行代码前需等待的毫秒数。

　　提示和注释

　　提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

 

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

<body>
<form>
<input type="button" value="显示计时的消息框！" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>

</html>
简单的计时 
<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)
}
</script>
</head>

<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>

</html>
无穷循环中的计时 
<html>
<head>
<meta charset="UTF-8">
<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 onload="startTime()">
<div id="txt"></div>
</body>
</html>
一个时钟

5、页面地址

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

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

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

 

　　location 对象其他应用：

　　(1)、location对象属性

　　　　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对象方法

　　　　实例：加载一个新文档

1 <input type="button" value="点击加载" onclick="newDoc()"> 2 <script> 3 function newDoc(){ 4  window.location.href('http://www.baidu.com') 5 } 6 </script>

　　　　实例：重新载入当前文档

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

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

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

 

6、浏览器尺寸

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

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

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

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

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

 

　　(2)、可用宽度和高度

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

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

1 <script>
2 document.write('可用宽度：' + screen.availWidth +'px');
3 document.write('<br>');
4 document.write('可用高度：' + screen.availHeight +'px'); 5 </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;

复制代码 
 1 <script>
 2 //对于IE9+、Chrome、Firefox、Opera 以及 Safari：
 3 document.write('可视宽为：' + window.innerWidth + '<br>');  4 document.write('可视高为：' + window.innerHeight + '<br>' + '<br>');  5  6 document.write('可视宽为：' + document.documentElement.clientWidth + '<br>');  7 document.write('可视高为：' + document.documentElement.clientHeight + '<br>' + '<br>');  8  9 //注意该方法返回的数值与其他不同 10 document.write('可视宽为：' + document.body.clientWidth + '<br>'); 11 document.write('可视高为：' + document.body.clientHeight + '<br>' + '<br>'); 12 13 var w = document.documentElement.clientWidth || document.body.clientWidth; 14 var h = document.documentElement.clientHeight || document.body.clientHeight; 15 document.write('可视宽为：' + w + '<br>' + '可视高为：' + h); 16 </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;

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

 

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

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

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

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

 

　　(4)、滚动距离

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

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

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

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

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

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

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

 

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

复制代码 
 1 <!DOCTYPE html>
 2 <html>  3 <head>  4 <meta charset="UTF-8">  5 <title>JavaScript实例</title>  6 <script>  7 //几款浏览器每次滚动，距离顶部的距离都不一样：  8 //在Chrome为100：0-100-200-300-400-500。都是整数递进。  9 //而在FF下则为132：0-132-264-396-528。每次递进132。 10 //而在IE下则为62：0-62-124-186-248。每次递进则为62。 11 window.onload = function (){ 12  document.onclick = function (){ 13 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 14  alert(scrollTop); 15  }; 16 }; 17 </script> 18 </head> 19 <body style="height:2000px"> 20 </body> 21 </html>
复制代码

 　　注意：标准浏览器都支持 documentElement.scrollTop，但 Chrome 却不支持，他只支持 document.body.scrollTop，所以总是要为做兼容处理：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

 

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

 

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

复制代码 
 1 <script>
 2 var oD = new Date();
 3 //从当天起14天也就是2周后是几号  4 oD.setDate(oD.getDate() + 14);  5 //设置过期时间2周。可在查看cookie中看到user的过期时间为2周后  6 document.cookie = 'user=小白;expires=' + oD;  7 //浏览器关闭删除本条cookie。pass的过期时间为在会话结束时。  8 document.cookie = 'pass = 123456';  9 //读取cookie 10 alert(document.cookie); 11 </script>
复制代码

 

　　(2)、修改cookie

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

复制代码 
 1 <script>
 2 var oD = new Date();
 3 oD.setDate(oD.getDate() + 14);  4 document.cookie = 'user=小白;expires=' + oD;  5 document.cookie = 'pass=123456';  6 //可在查看cookie中看到user和pass的内容都被新的cookie替换了  7 document.cookie = 'user=小明;expires=' + oD;  8 document.cookie = 'pass=654321';  9 //读取cookie 10 alert(document.cookie); 11 </script>
复制代码

 

　　(3)、删除cookie

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

 

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

复制代码 
 1 <!DOCTYPE html>
 2 <html>  3 <head>  4 <meta charset="UTF-8">  5 <title>Cookie封装函数</title>  6 </head>  7 <body>  8 <script>  9 //设置cookie 10 //参数1:cookie的名字，参数2：cookie的值，参数3：cookie过期时间 11 function setCookie(name, value, iDay){ 12 var oDate = new Date(); 13  oDate.setDate(oDate.getDate() + iDay); 14  document.cookie = name + '=' + value + '; expires =' + oDate; 15 } 16 17 //userName一年后过期，passWord两周后过期。 18 setCookie('userName', '小白', 365); 19 setCookie('passWord', '123456', 14); 20 21 //获取cookie 22 //参数为cookie的名称 23 function getCookie(name){ 24 //用字符串将cookie分割，注意要用：默认的cookie样式，分号加空格。 25 var arr = document.cookie.split('; '); 26 for(var i=0; i<arr.length; i++){ 27 //默认字符串显示为：a=5; b=12; c=21 28 //所以用等号再做一次分隔 29 var result = arr[i].split('='); 30 //result的第一位存名称 31 //如果第一位等于name，就说明找到想要的了,就返回第二位的值。 32 if(result[0] == name){ 33 //result的第二位存值 34 return result[1]; 35  } 36  } 37 //如果没有cookie就返回一个空字符串。比如有些用户是第一次进入网站，就没有产生cookie。 38 return ''; 39 } 40 //获取cookie中passWord的值 41 alert(getCookie('passWord')); 42 43 //参数为删除哪条cookie 44 function removeCookie(name){ 45 //参数1：cookie的值，1表示随便一个。参数3：昨天过期，立马删除。 46 setCookie(name, 1, -1); 47 } 48 49 //将cookie中userName和passWord删除。 50 //在点击查看页面信息，之前保存的cookie就不存在了。 51 removeCookie('userName'); 52 removeCookie('passWord'); 53 </script> 54 </body> 55 </html>
复制代码

 

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

复制代码 
 1 <!DOCTYPE html>
 2 <html>  3 <head>  4 <meta charset="UTF-8">  5 <title>记住上一次的用户名</title>  6 <script>  7 function setCookie(name, value, iDay){  8 var oDate = new Date();  9  oDate.setDate(oDate.getDate()+iDay); 10  document.cookie = name + '=' + value + '; expires =' + oDate; 11 } 12 function getCookie(name){ 13 var arr = document.cookie.split('; '); 14 for(var i=0; i<arr.length; i++){ 15 var result = arr[i].split('='); 16 if(result[0] == name){ 17 return result[1]; 18  } 19  } 20 return ''; 21 } 22 function removeCookie(name){ 23  setCookie(name, 1, -1); 24 } 25 window.onload = function (){ 26 var oForm = document.getElementById('form1'); 27 var oUser = document.getElementsByName('user')[0]; 28 //在点击提交按钮时发生的事件 29  oForm.onsubmit = function (){ 30 //创建一个cookie，值为用户名输入的值，14天后过期 31  setCookie('user', oUser.value, 14); 32  }; 33 //用户名的值为获取cookie中的user 34  oUser.value = getCookie('user'); 35 }; 36 </script> 37 </head> 38 <body> 39 //index.html为本文档文件名 40 <form id="form1" action="index.html"> 41 用户名：<input type="text" name="user"><br> 42 密　码：<input type="password" name="pass"><br> 43 <input type="submit" name="" value="登录"> 44 </form> 45 </body> 46 </html>

复制代码

3、窗口操作

　　(1)、打开窗口

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

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

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

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

参数值说明
topNum新窗口距屏幕顶部的距离
leftNum新窗口距屏幕左端的距离
widthNum新窗口的宽度
heightNum新窗口的高度
menubaryes/no/1/0窗口是否有菜单栏，默认是yes
scrollbarsyes/no/1/0窗口是否有滚动条，默认是yes
toolbaryes/no/1/0窗口是否有工具栏，默认是yes
statusyes/no/1/0窗口是否有状态栏，默认是yes
locationyes/no/1/0窗口是否显示地址栏，默认是yes
resizableyes/no/1/0是否允许改变窗口大小，默认是yes
directoriesyes/no/1/0是否添加目录按钮，默认是yes

 

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

复制代码 
1 <body>
2 <input type="button" onClick="newWin()" value="点击我，打开新窗口!"> 3 <script> 4 function newWin(){ 5  window.open('http://www.baidu.com', '_blank', 'width=600,height=400,top=0,left=10'); 6 } 7 </script> 8 </body>
复制代码

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

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

1 <script>
2 window.open(); 3 window.open('http://baidu.com'); 4 </script>

 

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

复制代码 
 1 <body>
 2 <input type="button" value="获得焦点" onclick="openWin()">  3 <script>  4 //确保新的窗口获得焦点：  5 function openWin(){  6 var oGet = window.open('', '', 'width=400,height=400');  7  oGet.document.write('<p>我是新打开的窗口</p>');  8  oGet.focus();  9 } 10 </script> 11 12 <input type="button" value="失去焦点" onclick="newWin()"> 13 <script> 14 //确保新的窗口没有获得焦点： 15 function newWin(){ 16 var lose = window.open('', '', 'width=400,height=300'); 17  lose.document.write('<p>我是新打开的窗口</p>'); 18  lose.blur(); 19 } 20 </script> 21 </body>
复制代码

 

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

复制代码 
1 <body>
2 <input type="button" value="打开" onclick="openWin()"> 3 <script> 4 function openWin(){ 5 var newWin = window.open('', 'newWindow', 'width=400,height=300'); 6  newWin.document.write('<p>新窗口名称：' + newWin.name + '</p>'); 7 } 8 </script> 9 </body>
复制代码

 

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

 

opener:

opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。

opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。

 

复制代码 
 1 <body>
 2 <input type="button" value="打开" onclick="openWin()">  3 <script>  4 function openWin(){  5 var newWin = window.open('', '', 'width=400,height=300');  6  newWin.document.write('<p>关闭我之后会向父窗口输入文本信息</p>');  7  newWin.focus();  8  newWin.opener.document.write('<p>我是父窗口，加载完成后，向我输出内容会覆盖我所有内容</p>');  9 } 10 </script> 11 </body>
复制代码

 

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

复制代码 
 1 <!DOCTYPE html>
 2 <html>  3 <head>  4 <meta charset="UTF-8">  5 <title>JavaScript实例</title>  6 </head>  7 <body>  8 <br><br>  9 <h4>用指定像素调整窗口大小：</h4> 10 <input type="button" value="打开" onclick="openWin()"><br><br> 11 <input type="button" value="调整" onclick="byWin()"> 12 <script> 13 var w; 14 function openWin(){ 15  w=window.open('', '', 'width=100,height=100,top=10'); 16  w.focus(); 17 } 18 19 function byWin(){ 20 //如果不使用框架，可使用window代替top 21  w.top.resizeBy(500,500); 22  w.focus(); 23 } 24 </script> 25 26 <h4>将窗口的大小调整到指定的宽度和高度：</h4> 27 <input type="button" value="打开" onclick="newWin()"><br><br> 28 <input type="button" value="调整" onclick="toWin()"> 29 <script> 30 var w; 31 function newWin(){ 32  w=window.open('', '', 'width=100,height=100'); 33  w.focus(); 34 } 35 36 function toWin(){ 37  w.resizeTo(500,500); 38  w.focus(); 39 } 40 </script> 41 42 <h4>相对于当前位置移动新窗口：</h4> 43 <input type="button" value="打开" οnclick="oWin()"><br><br> 44 <input type="button" value="多移动几下" οnclick="moveWin()"> 45 <script> 46 var w; 47 function oWin(){ 48 w = window.open('', '', 'width=100,height=100'); 49 } 50 51 function moveWin(){ 52 w.moveBy(200,200); 53 w.focus(); 54 } 55 </script> 56 57 <h4>移动新窗口到指定位置：</h4> 58 <input type="button" value="打开" οnclick="nWin()"><br><br> 59 <input type="button" value="移动" οnclick="moveToWin()"> 60 <script> 61 var w; 62 function nWin(){ 63 w=window.open('', '', 'width=400,height=300'); 64 } 65 66 function moveToWin(){ 67 w.moveTo(0,0); 68 w.focus(); 69 } 70 </script> 71 72 <h4>由指定的像素数滚动内容：</h4> 73 <input type="button" style="position:fixed;top:0;" οnclick="scrollWin()" value="由指定的像素数滚动内容"> 74 <script> 75 function scrollWin(){ 76 window.scrollBy(10,10); 77 } 78 </script> 79 80 <h4>滚动到指定内容处：</h4> 81 <input type="button" οnclick="scrollWindow()" value="滚动到指定内容处"> 82 <script> 83 function scrollWindow(){ 84 window.scrollTo(10,50); 85 } 86 </script> 87 88 <br><br><br><br><br><br> 89 </body> 90 </html>
复制代码

 

　　方法解析：

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

　　实例：打印当前页面

复制代码 
1 <body>
2 <input type="button" value="打印当前页面" onclick="printpage()"> 3 <script> 4 function printpage(){ 5  window.print(); 6 } 7 </script> 8 </body>
复制代码

 

　　(2)、关闭窗口

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

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

 

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

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

 

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

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

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

 

　　实例：关闭新打开的窗口

复制代码 
 1 <body>
 2 <input type="button" value="打开" onclick="openWin()">  3 <input type="button" value="关闭" onclick="closeWin()">  4 <script>  5 function openWin(){  6  newWin = window.open('http://www.baidu.com', '', 'width=400,height=300,top=200');  7 }  8 function closeWin(){  9  newWin.close(); 10 } 11 </script> 12 </body>
复制代码

 

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

复制代码 
 1 <body>
 2 <input type="button" value="打开'" onclick="openWin()">  3 <input type="button" value="关闭" onclick="closeWin()">  4 <input type="button" value="是否关闭" onclick="checkWin()">  5 <p id="p1"></p>  6 <script>  7 var newWin;  8 function openWin(){  9  newWin = window.open('', '', 'width=400,height=300,top=200'); 10 } 11 12 function closeWin(){ 13 if(newWin){ 14  newWin.close(); 15  } 16 } 17 18 var oP = document.getElementById('p1'); 19 function checkWin(){ 20 if(!newWin){ 21  oP.innerHTML = '新窗口还没被打开！'; 22  } 23 else{ 24 if(newWin.closed){ 25  oP.innerHTML = '新窗口已关闭！'; 26  } 27 else{ 28  oP.innerHTML = '新窗口未关闭！'; 29  } 30  } 31 } 32 </script> 33 </body>
复制代码

 

4、浏览器信息

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

复制代码 
 1 <body>
 2 <div id="div1"></div>  3 <script>  4 txt = '<p>Browser CodeName（浏览器代码名称）: ' + navigator.appCodeName + '</p>';  5 txt+= '<p>Browser Name（浏览器名称）: ' + navigator.appName + '</p>';  6 txt+= '<p>Browser Version（浏览器版本）: ' + navigator.appVersion + '</p>';  7 txt+= '<p>Cookies Enabled（启用Cookies）: ' + navigator.cookieEnabled + '</p>';  8 txt+= '<p>Platform（操作平台）: ' + navigator.platform + '</p>';  9 txt+= '<p>User-agent header（由客户机发送服务器的 user-agent 头部信息）: ' + navigator.userAgent + '</p>'; 10 txt+= '<p>User-agent language（客户机代理语言）: ' + navigator.systemLanguage + '</p>'; 11 12 document.getElementById('div1').innerHTML=txt; 13 </script> 14 </body>
复制代码

 

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

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

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

复制代码 
 1 <script>
 2 document.write('操作平台：' + navigator.platform);
 3 function userBrowser(){  4 var name = window.navigator.userAgent;  5 //IE浏览器  6 //判断IE和非IE可以使用ActiveXObject，只有IE支持该对象  7 //在IE中window.ActiveXObject返回一个对象，则判断为true  8 //其他浏览器都返回undefine，两个否返回false，进入或判断，也返回false  9 if(!!window.ActiveXObject || 'ActiveXObject' in window){ 10 return 'IE浏览器'; 11  } 12 //FF浏览器 13 else if(name.indexOf('Firefox') > -1){ 14 return 'Firefox浏览器'; 15  } 16 //Chrome浏览器 17 else if(name.indexOf('Chrome') > -1){ 18 return 'Chrome浏览器'; 19  } 20 //Opera浏览器 21 else if(name.indexOf('Opera') > -1){ 22 return 'Opera浏览器'; 23  } 24 //Safari浏览器 25 else if(name.indexOf('Safari') > -1){ 26 return 'Safari浏览器'; 27  } 28 else{ 29 return 'unknow'; 30  } 31 } 32 alert('浏览器类型为：' + userBrowser()); 33 </script>
复制代码

 

转载于:https://www.cnblogs.com/wu-chao/p/8514318.html

weixin_30521649
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript进阶学习-webAPI（总结）
weixin_43294092的博客
04-16 1826
webAPI DOM 概念 JS分三个部分： ECMAScript标准：js的基本语法 DOM：Document object model —文档对象模型—操作页面的元素 BOM: Browser object model —>浏览器对象模型—操作的是浏览器 DOM文档对象模型 文档 把一个HTML文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象 XML 文件也可以看成是一个文...
实现JavaScript的组成----BOM和DOM详解
10-22
下面小编就为大家带来一篇实现JavaScript的组成----BOM和DOM详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
JavaScript学习总结【6】、JS BOM
weixin_30294709的博客
11-26 95
1、BOM 简介 　　所谓的 BOM 即浏览器对象模型（Browser Object Model）。BOM 赋予了 JS 操作浏览器的能力，即 window 操作。DOM 则用于创建删除节点，操作 HTML 文档。BOM 尚无正式的标准，导致各浏览器对于 BOM 方法的支持各有不同，因此需要具体问题具体对待。 2、window 对象 　　window 对象是 BOM 的核心，windo...
JavaScript课程设计及其课程项目实战.zip
04-25
课程目录： 第一章 JavaScript简介 Javascript 第二章 JavaScript语句和函数 Javascript 第三章 JavaScript常用对象 Javascript 第四章 JavaScript高级对象 Javascript 第五章 文档对象模型 Javascript 第六章 JavaScript事件及应用 Javascript 第七章 JavaScript特效制作 Javascript 第八章 JavaScript高级特效 该资料包含课件、教案、作业、案例，详细的讲解及其该课程最终的使用项目。
js系列教程6-BOM操作全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-09 6603
全栈工程师开发手册 （作者：栾鹏） 快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程
js阶段学习总结
Mar.三月
01-20 312
大概路线就是js/es6/node.js创建应用时基本组成（模块引入+创建服务器+启动监听+请求+响应）+最后使用web框架搭建web应用 （创建web应用的方式node.js原生开发+使用成熟的web框架开发express/koa...
challenge-javascript-04:挑战-javascript-04-原始事件
03-08
挑战-javascript-04-原始事件 联合国市长（o primo）是自然市长，在1个国家没有自然保护区（multiplicando dosnúmerosnaturalesmáspequeños）。 联合国自然市长一等奖由ejemplo制作，5 es primo por lasú...
gulp-bom:将UTF-8 BOM添加到文件
05-26
口香糖将添加到文件从维基百科： Unicode标准允许使用UTF-8中的BOM，但既不需要也不建议使用它。 字节顺序在UTF-8中没有意义。 Gulp会删除BOM表，因为它是无用的。 这是针对一些确实需要它的愚蠢工具。 除非确实需要...
challenge-javascript-08:Challenge-javascript-08-JavaScript数组过滤器
03-09
Challenge-javascript-08-JavaScript数组过滤器 Los Arrays en Javascript soportan lafunción filter ，从头到尾评估数组，并从头到尾保持数组状态。 Usando lafunción filter用于研究Array上的buscar todos ...
JavaScript-Advanced:JavaScript-高级JavaScript-基础知识
03-08
JavaScript-Advanced:JavaScript-高级JavaScript-基础知识
JavaScript-alert()中文乱码的解决方法
热门推荐
Jaina_Proudmoore的博客
09-19 3万+
HTML页面的字符集为GBK，不支持显示中文,如果在JavaScript中的alert()弹出的对话框中显示中文则会出现乱码.
浏览器对象模型BOM
HBF__cg的博客
02-06 204
BOM主要用于管理窗口与窗口之间的通讯，其核心对象为window 所有浏览器都支持window对象，是BOM顶层（核心）对象 所有javascript全局对象，函数以及变量均成为window对象的成员 全局变量是window对象的属性 全局函数是 window 对象的方法 由于window对象是顶层对象，因此调用他的子对象时可以不显示的指明window对象，例如下面这俩行代码是一样的： docum...
javaScript学习总结（一）
zl428312的博客
08-27 147
一，js的数据类型 1，基本类型 数字 number 未定义 undefined 字符串 string 布尔 Boolean 字符 symbol 2，引用类型 数组 array 对象 Object 空 null 函数 function 3，基本类型和引用类型在内存中的区别 1，基本类型存储在栈中 2，引用类型以key,value形式存储在栈中，但value存储的是内存地址， 引用类型的数据存在堆中， 二，typeof 1,引用类型 其他 Object 函数 Function 2,基本类型 undefine
浏览器正确理解和使用GBK及UTF-8（UTF-8 + BOM）网页编码
weixin_30883311的博客
10-26 220
网页编码英文译为web page encoding，是在网页中指定其特定的字符编码格式的库。 GBK是国家标准GB2312基础上扩容后兼容GB2312的标准。GBK的文字编码是用双字节来表示的，即不论中、英文字符均使用双字节来表示，为了区分中文，将其最高位都设定成1。GBK包含全部中文字符，是国家编码，通用性比UTF8差，不过UTF8占用的数据库比GBK大。 UTF...
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 564
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
JS学习第十八天总结
前端工程师学习记录
04-11 164
1.使用sort方法进行数组排序 <script type="text/javascript"> var arr=[1,2,3,2,1,4,55,2,111,42,2]; var newArr=arr.sort(function(a,b){ return a-b;//升序排列，需要降序排列，返回b-a就行了 }); newArr.forEach(function(v,i){...
js学习总结
daxiao0611的博客
09-28 90
js JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，方法基于对象 事件驱动函数，它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言 js的组成: ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...) BOM:浏览器对象模型 DOM:文档对象模型作用: 修改html页...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 534
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1023
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
['10:30-11:30', '13:00-14:00', '9:00-10:00'] 使用javascript 进行排序
07-15
要使用 JavaScript 对时间数组进行排序，您可以使用`Array.sort()`方法和自定义比较函数。以下是一个示例代码： ```javascript const times = ['10:30-11:30', '13:00-14:00', '9:00-10:00']; times.sort((a, b) =...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值