(一)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();//后退