浏览器对象

来源：互联网发布：node全栈工程师招聘编辑：程序博客网时间：2024/05/17 23:33

1.window对象

1）所有浏览器都支持window对象。它表示浏览器窗口。

2）所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

window.document.getElementById("demo");

3)window窗口尺寸

window窗口尺寸（不包含工具条和滚动条）

window.innerHeight--浏览器窗口的内部高度

window.innerWidth--浏览器窗口的内部宽度

4）window其他方法

window.open()--打开新窗口

window.close()--关闭当前窗口

window.moveTo()--移动当前窗口

window.resizeTo()--调整当前窗口

2screen对象

1）包含有关用户屏幕的信息

screen.availWidth--可用的屏幕宽度

screen.availHeight--可用的屏幕高度

screen.width--屏幕宽度

screen.height--屏幕高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>    <p id="ptime"></p>    <button type="button" id="btn" onclick="stopTime()">按钮</button>    <script>function getTime(){var my_date=new Date();var time_str=my_date.toLocaleTimeString();document.getElementById("ptime").innerHTML=time_str;}var timer=setInterval(function(){getTime()},1000);function stopTime(){clearInterval(timer)}</script></body></html>

3计时器（两种方法）

1）在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

2）setInterval()：间隔制定毫秒数不停地执行

3） clearInterval()：停止setInterval（）方法的执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>    <p id="ptime"></p>    <script>function gettime(){var my_date=new Date();var time_str=my_date.toLocaleTimeString();document.getElementById("ptime").innerHTML=time_str;}setInterval(function(){gettime();},1000);     //每一秒刷新时间</script></body></html>

4）setTimeout()：暂停指定毫秒数后执行

5）clearTimeout()：停止setTimeout()方法执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p id="ptime"></p>
<script>
function getTime()
{
var my_date=new Date();
var time_str=my_date.toLocaleTimeString();
document.getElementById("ptime").innerHTML=time_str;
setTimeout(function(){getTime();},1000); //隔段时间调用getTime()函数
}
getTime();
</script>
</body>
</html>

4.history对象

1)包含浏览器的历史

history.back()--同浏览器点击后退按钮

history.forward()--同浏览器中点击向前按钮

history.go()--进入历史中的某个页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><button id="btn" onclick="goback()">回退</button>    <script>function goback(){//history.back();history.go(-1);}</script></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><a href="index.html">index</a><button id="btn" type="button" onclick="myforward()">forward</button><script>function myforward(){history.forward();}</script></body></html>

5.location对象

1)获取当前页面的URL,并定向到新的页面

location.hostname：获取web主机的域名

location.pathname：获取当前页面的路径和文件名

location.port：获取web主机的端口（80或443）

location.protocol：获取使用的web协议（http://或https://）

location.href：属性返回当前页面的URL

location.assign()：方法加载一个新的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>    <script>document.write(location.hostname);document.write("<br>");document.write(location.pathname);document.write("<br>");document.write(location.href);document.write("<br>");</script></body></html>

6.cookie

1)cookie用来识别用户

2）cookie式存储于访问者的计算机中的变量。

每当同一台计算机通过浏览器请求某个页面时就会发送这个cookie。可以使用JavaScript来创建和取回cookie的值

3）创建和存储cookie

<html><head><script type="text/javascript">function getCookie(c_name){if (document.cookie.length>0)  {  c_start=document.cookie.indexOf(c_name + "=")  if (c_start!=-1)    {     c_start=c_start + c_name.length+1     c_end=document.cookie.indexOf(";",c_start)    if (c_end==-1) c_end=document.cookie.length    return unescape(document.cookie.substring(c_start,c_end))    }   }return ""}function setCookie(c_name,value,expiredays){var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())}function checkCookie(){username=getCookie('username')if (username!=null && username!="")  {alert('Welcome again '+username+'!')}else   {  username=prompt('Please enter your name:',"")  if (username!=null && username!="")    {    setCookie('username',username,365)    }  }}</script></head><body onLoad="checkCookie()"></body></html>

1 0