(一)JavaScript关于浏览器
JavaScript关于浏览器
JavaScript是在浏览器中运行的,不同浏览器对JavaScript支持是有差异的,编写JavaScript时要考虑浏览器的差异,尽可能使它能运行在不同的浏览器中。一、浏览器中对象
1.window
Window:表示浏览器打开的窗口,充当全局作用域。使用Windows对象的属性和方法时是可以不用特别指明的(一般按照习惯吧:如window.alert()通常为alert())。
属性名 |
作用 |
name |
指定窗口的名称 |
parent |
当前窗口(框架)的父窗口,使用它返回对象的方法和属性 |
opener |
返回产生当前窗口的窗口对象,使用它返回对象的方法和属性 |
top |
代表主窗口,是最顶层的窗口,也是所有其他窗口的父窗口。可通过该对象访问当前窗口的方法和属性 |
self |
返回当前窗口的一个对象,可通过该对象访问当前窗口的方法和属性 |
defaultstatus |
返回或设置将在浏览器状态栏中显示的默认内容 |
status |
返回或设置将在浏览器状态栏中显示的指定内容 |
方法名 |
作用 |
alert() |
显示一个警示对话框,包含一条信息和一个确定按钮 |
confirm() |
显示一个确认对话框 |
prompt() |
显示一个提示对话框,提示用户输入数据 |
open() |
打开一个已存在的窗口,或者创建一个新窗口,并在该窗口中加载一个文档 |
close() |
关闭一个打开的窗口 |
navigate() |
在当前窗口中显示指定网页 |
setTimeout() |
设置一个定时器,在经过指定的时间间隔后调用一个函数 |
clearTimeout() |
给指定的计时器复位 |
focus() |
使一个Window对象得到当前焦点 |
blur() |
使一个Window对象失去当前焦点 |
事件 |
说明 |
onload |
HTML文件载入浏览器时发生 |
onunload |
HTML文件从浏览器删除时发生 |
onfocus |
窗口获得焦点时发生 |
onblur |
窗口失去焦点时发生 |
onhelp |
用户按下F1键时发生 |
onresize |
用户调整窗口大小时发生 |
onscroll |
用户滚动窗口时发生 |
onerror |
载入HTML文件出错时发生 |
一些对于Window的操作:
alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);//获取窗口大大小 window.confirm('对话框显示的信息!'); mu = window.open("http://www.baidu.com","","width=200,height=100");//打开一个网页,也可以其中只有url,其他则默认 mu.moveTo(1600,584);//将窗口移动到什么位置 mu.moveBy(-111,-111);//基于xy位移多少 mu.resizeTo(800,400);//改变窗口大小到w800,h400 var a =prompt("请输入你的名字","为空时文本框的内容");//输入提示框,返回输入的内容 alert(a);
一些定时操作:
定时操作函数有四个:window.setInterval、window.clearInterval、window.setTimeout、window.clearTimeout,这四个函数都是window对象的方法,这说明浏览器中的定时操作是由浏览器窗口完成的。(单位ms)
① window.setInterval 设置定时器,每隔一段时间执行指定的代码 window.setInterval(code,time);
② window.clearInterval 清除setInterval函数设置的定时器window. clearInterval(time);
③ window.setTimeout 设置定时器,每隔一段时间执行指定的代码 window.setTimeout(code,time);代码只执行一次。
④ window.clearTimeout 清除setTiimeout 函数设置的定时器 window. clearTimeout(time);
一段动态显示时间的代码:设置一个定时器,定时器每隔1000ms执行clock()函数,而在函数中又把值赋给文本框。
<html> <script language=javascript> var int=self.setInterval("clock()",1000); function clock(){ var t=new Date(); document.getElementById("clock").value=t; }; </script> <body> <input type="text" id="clock" size="35" /> <button onclick="int=window.clearInterval(int)">停止定时器</button> </body> </html>
一个在页面中显示时间的代码:
<html> <script language=javascript> var int=self.setInterval("clock()",1000); function clock(){ var t=new Date(); var hehe = document.getElementById("ck"); hehe.innerText=t; }; </script> <body> <p id="ck">...</p> <button onclick="int=window.clearInterval(int)">stop</button> </body> </html>
2.navigator
navigation对象 包含了浏览器本身的信息;这些信息是可以被修改的,所以根据这个判断什么是不正确的。
navigator对象表示浏览器的信息,最常用的属性包括:
navigator.appName:浏览器名称;
navigator.appVersion:浏览器版本;
navigator.language:浏览器设置的语言;
navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent字符串
alert('appName = ' + navigator.appName + '\n' + 'appVersion = ' + navigator.appVersion + '\n' + 'language = ' + navigator.language + '\n' + 'platform = ' + navigator.platform + '\n' + 'userAgent = ' + navigator.userAgent);
3.scree
screen对象 包含了客户端屏幕及渲染能力的信息;
screen.width:屏幕宽度,以像素为单位;
screen.height:屏幕高度,以像素为单位;
screen.colorDepth:返回颜色位数,如8、16、24。
alert('Screen size = ' + screen.width + ' x ' + screen.height)
4.location
location对象包含了浏览器当前的URL信息;
var b = location.href;//获取完整的URL alert(b); location.protocol; // 协议'http' location.host; //地址 'www.xxx.com' location.port; //端口号 '8080' location.pathname; // 路径'/path/index.html' location.search; location.hash;location的方法重载页面,重载当前页面和加载一个新的页面。
if (confirm('重新加载当前页' + location.href + '?')) { location.reload(); } else { location.assign('https://www.baidu.com/index.php?tn=monline_3_dg'); // 设置一个新的URL地址 }
5.document
document对象 表示浏览器中加载页面的文档对象;
document.getElementById('unid');//获取到这个对象 document.getElementsByTagName('input');
document对象还有一个cookie属性,可以获取当前页面的Cookie。(服务器可以由此区分用户)
document.cookie;
JavaScript能读取到页面的Cookie,服务器端在设置Cookie时,应该始终坚持使用httpOnly
;这个行为由浏览器实现,设置后JavaScript不能读取cookie,主流浏览器均支持httpOnly选项。
6.history
forward和 back 方法如同浏览器的前进和后退功能。
history.forward();//前进 history.back();//后退