JS 浏览器对象
1.window对象
1.1 window对象
window对象是BOM的核心、window对象指当前的浏览器窗口
所有JavaScript全局对象 、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象属性之一
1.2 window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
Window.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn" onclick="btnClicked()">按钮</button><br />
<script>
document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight); function btnClicked(){
window.open("index.html","windowname","height=200,width=200,top=100,left=100,toolbar=no,menubar=no");//打开页面设置各属性
window.close();//关闭页面
}
</script>
</body>
</html>
2.计时器
2.1 计时事件
通过使用JavaScript，我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，称之为计时事件。
2.2 计时方法
1>setInterval() 间隔指定的毫秒数不停的执行指定的代码
clearInterval() 方法用于停止setInterval()方法执行的函数代码
2>setTimeout() 暂停指定的毫秒数后执行指定的代码
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
JiShiQi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="ptime"></p>
<button id="btn" onclick="stopTime()">stopTime()</button><br />
<button id="btn" onclick="myWin()">myWin()</button><br />
<button id="btn" onclick="myWinXh()">myWinXh()</button><br />
<button id="btn" onclick="stopWin()">stopWin()</button><br />
<script>
var mytime=setInterval(function(){ //不断的执行，1秒刷新
getTime()
},1000);
function getTime(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("ptime").innerHTML=t;
}
function stopTime(){ //停止执行
clearInterval(mytime);
} var win;
function myWin(){
win=setTimeout(function(){ //指定3秒后弹出
alert("hello");
},3000);
} var winXh;
function myWinXh(){
alert("hello");
win=setTimeout(function(){ //指定3秒后循环弹出
myWinXh();//自己调用自己循环
},3000);
} function stopWin(){ //终止win弹出
clearTimeout(win);
} </script>
</body>
</html>
3.History对象
3.1 History对象
window.history对象包含浏览器的历史(url)的集合
3.2 History方法
history.back() 与在浏览器点击后退按钮相同
history.firward() 与在浏览器点击向前按钮相同
history.go() 进入历史中的某个页面
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--<a href="History.html">跳转到History</a>
<button id="btn" onclick="goHistory()">goHistory()</button>
<script>
function goHistory(){
history.forward(); //前进到下个页面
}
</script>--> <a href="History.html">跳转到History</a>
</body>
</html>
History.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- <button id="btn" onclick="goindex()">goindex()</button>
<script>
function goindex(){
history.back(); //后退回上一页面
}
</script>
--> <br />
<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); //进入前页面,当前页面为0
}else{
alert("输入错误");
}
}
</script>
</body>
</html>
4.Location对象
4.1 Location对象
window.location对象用于获得当前页面的地址(url)，并把浏览器重定向到新的页面。
4.2 Location对象的属性
location.hostname 返回web主机的域名
location.psthname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议(http://或https://)
location.href 属性返回当前页面的URL
location.assign() 方法加载新的文档
Location.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1" onclick="get1()">gethostname</button>
<p id="p1"></p>
<script>
function get1(){
document.getElementById("p1").innerHTML=window.location.hostname;
}
</script> <button id="btn2" onclick="get2()">getpathname</button>
<p id="p2"></p>
<script>
function get2(){
document.getElementById("p2").innerHTML=window.location.pathname;
}
</script> <button id="btn3" onclick="get3()">getport</button>
<p id="p3"></p>
<script>
function get3(){
document.getElementById("p3").innerHTML=window.location.port;
}
</script> <button id="btn4" onclick="get4()">gethref</button>
<p id="p4"></p>
<script>
function get4(){
document.getElementById("p4").innerHTML=window.location.href;
}
</script> <button id="btn5" onclick="get5()">getassign</button>
<p id="p5"></p>
<script>
function get5(){
location.assign("http://www.baidu.com");//方法加载新的文档
}
</script> </body>
</html>
5. screen对象
5.1 Screen对象
window.screen对象包含有关用户屏幕的信息
5.2 属性
screen.availWidth 可用的屏幕宽度
screen.availHeight 可用的屏幕高度
screen.Height 屏幕高度
screen.Width 屏幕宽度
Screen.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
document.write("可用宽度："+screen.availWidth+", 可用高度："+screen.availHeight);
document.write("<br />");
document.write("宽度："+screen.width+", 高度："+screen.height);
</script>
</body>
</html>
JS 浏览器对象的更多相关文章
- Js浏览器对象
Js浏览器对象——window对象 1.window对象: (1)window对象是BOM的核心,window对象指当前的浏览器窗口. (2)所有的JavaScript全局对象.函数以及变量均自动成为 ...
- JS浏览器对象：window对象、History、Location对象、Screen对象
一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...
- js浏览器对象的属性和方法
1.window对象 /*1.计算浏览器窗口大小*/ //不算滚动条: var width = window.innerWidth; var height = window.innerHeight; ...
- js浏览器对象navigator
移动端通常需要判断当前设备的类型,比如安卓,ios等.输出浏览器的请求代理,可以判断浏览器类型.js代码如下 判断当前浏览器的请求代理 我是出来玩的! <!DOCTYPE html> &l ...
- JS浏览器对象-window对象
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- JS浏览器对象-Screen对象
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- JS浏览器对象-Location对象
1.返回web主机的域名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS浏览器对象-History对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS浏览器对象-计时器
setInterval用法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- 30_java之DButils工具类
01DButils工具类的介绍个三个核心类 * A: DButils工具类的介绍个三个核心类 * a: 概述 * DBUtils是java编程中的数据库操作实用工具,小巧简单实用. * DBUtils ...
- Python新利器之pipenv(转)
pipenv 都包含什么? pipenv 是 Pipfile 主要倡导者.requests 作者 Kenneth Reitz 写的一个命令行工具,主要包含了Pipfile.pip.click.requ ...
- window 10 javac不是内部或外部命令
今天在新电脑上配置Java环境变量(window 10),不管怎么配置都是提示“javac不是内部或外部命令”,java,java -version命令是正常的. 后来发现是path路径配置的不对,修 ...
- linux qmake commend not found
最近在学习Go语言,想要安装IDE liteide,在按这篇教程进行安装,当执行./build_linux.sh的时候,提示qmake commend not found的字眼,于是在网上搜,说出现这 ...
- Spring IOC容器启动流程源码解析(一)——容器概念详解及源码初探
目录 1. 前言 1.1 IOC容器到底是什么 1.2 BeanFactory和ApplicationContext的联系以及区别 1.3 解读IOC容器启动流程的意义 1.4 如何有效的阅读源码 2 ...
- 31-字符串转为 url 格式的两种不同情况
将此字符串转为 url 格式的: # 如果是转化对象用:data=urllib.parse.urlencode(values) # 如果是转化字符串:s=urllib.parse.quote(s)
- golang之math/rand随机数
简单的随机数生成,结合时间模块初始化种子 package main import ( "fmt" "math/rand" "time" ) ...
- Differential expression analysis for paired RNA-seq data 成对RNA-seq数据的差异表达分析
Differential expression analysis for paired RNA-seq data 抽象背景:RNA-Seq技术通过产生序列读数并在不同生物条件下计数其频率来测量转录本丰 ...
- Disruptor 系列（一）快速入门
Disruptor 系列(一)快速入门 Disruptor:是一个开源的并发框架,能够在 无锁 的情况下实现网络的 Queue 并发操作,所以处理数据的能力比 Java 本身提供的并发类容器要大的多, ...
- Linux服务器上日志报com.mysql.jdbc.PacketTooBigException: Packet for query is too large (1783 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.
在做查询数据库操作时,报了以上错误,还有out of memery heap hacp ,原因是MySQL的max_allowed_packet设置过小引起的,我一开始设置的是1M,后来改为了20M ...