JS浏览器对象-windows对象、计时器、History对象、Location对象、Screen对象
来源:互联网 发布:cnstorm知乎 编辑:程序博客网 时间:2024/06/15 08:43
1.window对象
(1)window对象是BOM(浏览器对象模型)的核心、window对象指当前的浏览器窗口
所有js全局对象、函数以及变量均自动成为window对象的成员
全局变量为window对象的属性
全局函数是window对象的方法
HTML DOM的document也是window对象的属性
(2)window尺寸
window.innerHeight-浏览器窗口内部的高度
windows.innerWidth-浏览器窗口的内部宽度
(3)window方法
window.open()-打开新窗口
window.close()-关闭当前窗口
简单事例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSDOM浏览器对象</title></head><body><button onclick="openW()">button</button><script> window.document.write("hello"); document.write("world");//window可以不写 document.write("高度"+window.innerHeight+"宽度"+window.innerWidth); function openW() { //打开新窗口 // window.open("hello.html","windowname","height=200,width=200"); // 关闭窗口 window.close(); }</script></body></html>
2.计时器
(1)计时方法:
setInterval()间隔指定的毫秒数后不停的执行代码
clearInterval()用于停止setInterval()所执行的代码
setTimeout()暂停指定的毫秒后执行指定的代码
clearTimeout()用于停止setTimeout()所执行的代码
事例代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSDOM浏览器对象</title></head><body onload="changeTime2()"><p id="pid"></p><button onclick="stop1()">button</button><button onclick="stop2()">button2</button><script> //var time1= window.setInterval(function () { // changeTime(); // },1000); // function changeTime() { // var date=new Date(); // var a=date.toLocaleTimeString(); // document.getElementById("pid").innerHTML=a; //} // function stop1() { // window.clearInterval(time1);//把上面的变量传进去 // } var time2; function changeTime2() { var date=new Date(); var a=date.toLocaleTimeString(); document.getElementById("pid").innerHTML=a; time2=window.setTimeout(function () { changeTime2();//需要自己调用自己才能实现时间的改变 },1000); } function stop2() { window.clearTimeout(time2); }</script></body></html>
3.History对象
window.history对象包含浏览器的历史(url)的集合
history方法:
history.back()与在浏览器点击的后退按钮相同
history.forward()与浏览器中点击的向前按钮相同
historry.go()进入历史中的某个界面
模仿简单的登录成功与否界面的跳转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS浏览器对象</title></head><body><input id="useName" type="text"><button onclick="login()"></button><script> function login() { var useName=document.getElementById("useName").value; if(useName=="h"){//如果用户名为h则跳转到上一个界面 history.back("js.html"); }else { alert("you are error"); } }</script></body></html>
4.Location对象
(1)window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面
(2)Location对象的属性
location.hostname返回当前页面的路径和文件名
location.port返回web主机的端口
location.protocol返回所使用的web协议(htto://或者https://)
location.href属性返回当前页面的URL
location.assign方法加载新的文档
事例代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS浏览器对象</title></head><body><p id="pid1"></p><p id="pid2"></p><p id="pid3"></p><p id="pid4"></p><p id="pid5"></p><button onclick="change()">button1</button><button onclick="change2()">button2</button><script type="text/javascript"> function change() { document.getElementById("pid1").innerHTML=location.hostname; document.getElementById("pid2").innerHTML=location.pathname; document.getElementById("pid3").innerHTML=location.port; document.getElementById("pid4").innerHTML=location.protocol; document.getElementById("pid5").innerHTML=location.href; } function change2() { location.assign("http://www.baidu.com"); }</script></body></html>
5.Screen对象
(1)window.screen对象包含有关用户屏幕的信息
(2)属性
screen.availWidth可用屏幕宽度
screen.acailHeight可用的屏幕高度
screen.Height屏幕高度
screen.Width屏幕宽度
简单事例代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS浏览器对象</title></head><body><script> document.write(window.screen.availHeight+"</br>") ;//可以屏幕高度 document.write(window.screen.availWidth+"</br>");//可以屏幕宽度 document.write(window.screen.height+"</br>");//屏幕高度 document.write(window.screen.width);//屏幕高度</script></body></html>
- JS浏览器对象-windows对象、计时器、History对象、Location对象、Screen对象
- javascript浏览器对象(window/计时器/History/location/navigator/screen/document)
- JavaScript浏览器对象、window对象、计时器、history对象、location对象
- 浏览器对象(Window、History、Location、Navigator、Screen)
- JavaScript浏览器对象之三History对象+Navigator对象+Location对象+Screen对象
- JavaScript浏览器对象之History对象 Navigator对象 Location对象 Screen对象
- History对象,location对象
- 浏览器对象模型BOM-window,history,location,screen,navigator
- Window 对象、document对象、history对象、location对象、navigator对象、screen对象
- window对象中的location、screen、navigator、history
- location对象和history对象
- history对象和location对象
- history对象与location对象
- JS history对象和screen对象以及Navigator对象
- js笔记5浏览器对象和history和screen
- history、location、document对象
- 第八章:BOM(location对象、navigator对象、screen对象、history对象)
- Location对象、Screen对象、Dom编程
- 6.9.3 qmgr_active_done_2_generic函数:发送邮件状态通知信
- 学习笔记一
- pixhawk代码中关于传感器的一点记录
- Ubuntu下编译 ArduCopter
- iOS跳转到蓝牙设置页面
- JS浏览器对象-windows对象、计时器、History对象、Location对象、Screen对象
- Hibernate验证注解
- iOS开发基础学习笔记——导航控制器2->导航栏(UINavigationBar)/工具栏(toolBar)/导航元素按钮(UINavigationItem)
- red5搭建直播转播服务器
- JPA Many To Many Duplicate record in join table
- 何时加入一家创业公司?
- 6.9.4 qmgr_active_done_25_generic函数:发送退信或延迟提醒信
- mysql innodb 优化 参数篇
- 2016.4.6第三方工具总结final