JS浏览器对象
一、JS浏览器对象-window对象
1、window对象：
window对象是BOM的核心，window对象指当前的浏览器窗口
所有的JavaScript全局对象、函数以及变量均自动生成window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
2、window尺寸：
window.innerHeight--浏览器窗口内部高度
window.innerWidth--浏览器窗口内部宽度
二、JS浏览器对象-定时器
1、计时事件：
通过使用JavaScript，我们有能力做到在一个设定的时间间隔后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件。
2、计时方法
1）、setInterval（）-间隔制定的毫秒数不停地执行指定的代码
clearInterval（）方法用于停止setInterval（）方法执行的函数代码
2）、setTimeout（）-暂停制定的毫秒数后执行指定的代码
clearTimeout（）方法用于停止执行setTimeout（）方法的函数代码
具体应用实例如下：
（1）间隔一秒后获取当地的时间，按下按钮时，停止setInterval（）方法的执行
<body >
<button id="btn" onclick="stopTime()">按钮</button>
<p id="ptime"></p>
<script>
var mytime=setInterval(function(){
getTime();
},1000); //定义时间变量，并用setInterval（）方法延迟执行
function getTime(){
var d=new Date(); //创建一个时间对象
var t=d.toLocaleTimeString(); //将时间对象转化成字符串的形式
document.getElementById("ptime").innerHTML=t; //将得到的字符串放在<p>标签里
}
function stopTime(){ //停止setInterval（）方法的执行
clearInterval(mytime);
}
</script>
</body>
（2）3秒后弹出一个”hello“
<body onload="myWin()">
<script>
var win;
function myWin(){
win=setTimeout(function(){alert("hello")},3000);
}
</script>
</body>
（3）每隔3秒弹出一个”hello“，点击按钮停止弹出
<body onload="myWin()">
<button id="btn" onclick="stopWin()">按钮</button>
<script>
var win;
function myWin(){
alert("hello")
win=setTimeout(function(){myWin()},3000); //自己调用自己，实现反复弹出
}
function stopWin(){ //停止setTimeout（）方法的执行
clearTimeout(win);
}
</script>
</body>
三、JS浏览器对象-History对象
1、History对象：
window.History对象包含浏览器的历史（url）的集合
2、History方法：
history.back()--与在浏览器点击后退按钮相同
history.forward()--与在浏览器点击前进按钮相同
history.go()--进去历史中的某个页面
具体应用实例如下：
（1）运行text.html，点击跳转到new_file的链接跳转到new_file.html的页面，再点击”回退“键，回退到text.html页面
text.html代码：
<body>
<a href="new_file.html">跳转到new_file</a>
</body>
new_file.html代码：
<body>
<button id="btn" onclick="gotest()">按钮</button>
<script>
function gotest(){
history.back();
}
</script>
</body>
（2）运行text.html，点击跳转到new_file的链接跳转到new_file.html的页面，再点击”回退“键，回退到text.html页面，再点击”前进“按钮，进入new_file.html页面
text.html代码：
<body>
<a href="new_file.html">跳转到new_file</a>
<button id="btn" onclick="gonewfile()">前进</button>
<script>
function gonewfile(){
history.forward();
}
</script>
</body>
new_file.html代码：
<body>
<button id="btn" onclick="gotest()">回退</button>
<script>
function gotest(){
history.back();
}
</script>
</body>
（3）、运行text.html，点击”跳转“按钮，跳到new_file.html的页面，输入验证码，如果输入”hello“，点击按钮返回到text.html页面，否则弹出错误提示
text.html代码：
<body>
<a href="new_file.html">跳转</a>
</body>
new_file.html代码：
<body>
<form>
<input type="text" id="username">
</form>
<button id="btn" onclick="safe()">按钮</button>
<script>
function safe(){
var name=document.getElementById("username").value;
if(name=="hello"){
history.go(-1);
}else{
alert("输入错误");
}
}
</script>
</body>
四、JS浏览器对象-Location对象
1、Location对象：
window.Location对象用于获取当前页面的地址（URL），并把浏览器重新定义到新的页面。
2、Location对象的属性：
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机端口
location.protocol 返回所使用的web协议（http://或https://）
location.herf 属性返回当前页面的URL
（1）测试返回web主机的域名：
<body >
<button id="btn" onclick="getloc()">按钮</button>
<p id="ptime"></p>
<script>
function getloc(){
document.getElementById("ptime").innerHTML=window.location.protocol;
}
</script>
</body>
location.pathname 、 location.port、location.protocol、 location.herf用法同location.hostname相同
（2）点击按钮跳转到http://www.jikexueyuan.com
<body >
<button id="btn" onclick="getloc()">按钮</button>
<p id="ptime"></p>
<script>
function getloc(){
location.assign("
<body >
<button id="btn" onclick="getloc()">按钮</button>
<p id="ptime"></p>
<script>
function getloc(){
location.assign("http://www.jikexueyuan.com");
}
</script>
</body>
");
}
</script>
</body>
五、JS浏览器对象-Screen对象
1、Screen对象：
window.Screen对象包含有关用户屏幕的信息
2、属性：
screen.availWidth 可用屏幕宽度
screen.availHeight 可用屏幕高度
screen.width 屏幕宽度
screen.height 屏幕高度
打印可用屏幕宽度和可用屏幕高度及屏幕宽度和高度：
<body >
<script>
document.write("可用高度:"+screen.availHeight+"可用宽度："+screen.availWidth);
document.write("高度:"+screen.height+"宽度："+screen.width);
</script>
</body>
