JavaScript可以获取浏览器提供的很多对象,并进行操作。
window
对象不但充当全局作用域,而且表示浏览器窗口。
window
对象有innerWidth
和innerHeight
属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。
'use strict'; console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
对应的,还有一个outerWidth
和outerHeight
属性,可以获取浏览器窗口的整个宽高
因此全局变量是window对象的属性,全局函数是window对象的方法
JavaScript可以获取浏览器提供的很多对象,并进行操作。所有浏览器都支持 window 对象。
window
对象不但充当全局作用域,而且表示浏览器窗口。
window
对象有innerWidth
和innerHeight
属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。
兼容性:IE<=8不支持。
'use strict';
Runwindow inner size: 1281 x 664
对应的,还有一个outerWidth
和outerHeight
属性,可以获取浏览器窗口的整个宽高。
打开新窗口
关闭当前窗口
navigator
对象表示浏览器的信息,最常用的属性包括:
User-Agent
字符串。请注意,
navigator
的信息可以很容易地被用户修改,所以JavaScript读取的值不一定是正确的
正确的方法是充分利用JavaScript对不存在属性返回undefined
的特性,直接用短路运算符||
计算:
var width = window.innerWidth || document.body.clientWidth;
包含用户屏幕的信息
screen
对象表示屏幕的信息,常用的属性有:
用于获取当前页面的地址(URL), 并把浏览器重新定向到新的页面
location
对象表示当前页面的URL信息。例如,一个完整的URL:
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href
获取。要获得URL各个部分的值,可以这么写:
location.hostname //返回 web 主机的域名 www.example.com location.protocol; // 'http' location.host; // 'www.example.com' location.port; // '8080' location.pathname; // '/path/index.html' location.search; // '?a=1&b=2' location.hash; // 'TOP' location.href //属性返回当前页面的 URL location.assign() 方法加载新的文档
要加载一个新页面,可以调用location.assign()
。如果要重新加载当前页面,调用location.reload()
方法非常方便。
'use strict'; if (confirm('重新加载当前页' + location.href + '?')) { location.reload(); } else { location.assign('/'); // 设置一个新的URL地址 }
document
对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document
对象就是整个DOM树的根节点。
document
的title
属性是从HTML文档中的<title>xxx</title>
读取的,但是可以动态改变
'use strict'; document.title = '努力学习JavaScript!';
要查找DOM树的某个节点,需要从document
对象开始查找。最常用的查找是根据ID和Tag Name。
我们先准备HTML数据:
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"> <dt>摩卡</dt> <dd>热摩卡咖啡</dd> <dt>酸奶</dt> <dd>北京老酸奶</dd> <dt>果汁</dt> <dd>鲜榨苹果汁</dd> </dl>
用document
对象提供的getElementById()
和getElementsByTagName()
可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点:
'use strict'; var menu = document.getElementById('drink-menu'); var drinks = document.getElementsByTagName('dt'); var i, s, menu, drinks; menu = document.getElementById('drink-menu'); menu.tagName; // 'DL' drinks = document.getElementsByTagName('dt'); s = '提供的饮料有:'; for (i=0; i<drinks.length; i++) { s = s + drinks[i].innerHTML + ','; } console.log(s); >>> 提供的饮料有:摩卡,酸奶,果汁,
Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的,但是服务器要区分到底是哪个用户发过来的请求,就可以用Cookie来区分。当一个用户成功登录后,服务器发送一个Cookie给浏览器,例如user=ABC123XYZ(加密的字符串)...
,此后,浏览器访问该网站时,会在请求头附上这个Cookie,服务器根据Cookie即可区分出用户。
Cookie还可以存储网站的一些设置,例如,页面显示的语言等等。
JavaScript可以通过document.cookie
读取到当前页面的Cookie:
document.cookie; // 'v=123; remember=true; prefer=zh'
由于JavaScript能读取到页面的Cookie,而用户的登录信息通常也存在Cookie中,这就造成了巨大的安全隐患,这是因为在HTML页面中引入第三方的JavaScript代码是允许的:
<!-- 当前页面在wwwexample.com --> <html> <head> <script src="http://www.foo.com/jquery.js"></script> </head> ... </html>
如果引入的第三方的JavaScript中存在恶意代码,则www.foo.com
网站将直接获取到www.example.com
网站的用户登录信息。
为了解决这个问题,服务器在设置Cookie时可以使用httpOnly
,设定了httpOnly
的Cookie将不能被JavaScript读取。这个行为由浏览器实现,主流浏览器均支持httpOnly
选项,IE从IE6 SP1开始支持。
为了确保安全,服务器端在设置Cookie时,应该始终坚持使用httpOnly
。
创建一个可在 cookie 变量中存储访问者姓名的函数:
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()) }
上面这个函数中的参数存有 cookie 的名称、值以及过期天数。
在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。
之后,我们要创建另一个函数来检查是否已设置 cookie:
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 "" }
上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。
最后,我们要创建一个函数,这个函数的作用是:如果 cookie 已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。
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) } } }
history
对象保存了浏览器的历史记录
用户点击了浏览器的“后退”
这个对象属于历史遗留对象,对于现代Web页面来说,由于大量使用AJAX和页面交互,简单粗暴地调用history.back()
可能会让用户感到非常愤怒。
新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()
,试图回到登录前的页面。这是一种错误的方法。
任何情况,你都不应该使用history
这个对象了。
用户点击了浏览器的“前进”
进入历史中某个页面
alert("我是警告框!!")
alert("再次向您问好!在这里,我们向您演示" + '\n' + "如何向警告框添加折行。")
<html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body> </html>
<html> <head> <script type="text/javascript"> 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>