BOM对象
iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <iframe name="no1"
src="http://www.sina.com.cn" width="100%" height=200>
</iframe>
<iframe name="no2"
src="http://www.baidu.com" width="100%" height=200>
</iframe> -->
<!--<a href="http://www.baidu.com" target="no2">打开百度</a>
<!--BOM浏览器对象模型:包括window、location、navigator等对象
1.iframe在一个页面创建多个窗口
2.利用window.open创建子窗口
3.窗口对话框
4.url与location
-->
<iframe name="no2"
src="00.test.html" width="100%" height=500>
</iframe>
<script type="text/javascript">
//iframe窗口框架元素，可通过iframe在一个主窗口内嵌多个子窗口
//可以通过窗口名称调用同域名下的其他窗口变量
no2.a
no2.b
/*可以通过window.子窗口名称.属性访问iframe窗口的属性
比如通过location指定窗口打开页面
window.no2.location = url
window.no2.location="http://www.baidu.com"
在iframe窗口内通过window.top访问主窗口
*/
window.name = "chengzi"
</script>
</body>
</html>
window.open
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="newwin">打开百度</a>
<script type="text/javascript">
/*
window.open(url,name,args):
在指定名称为name的窗口中打开url网址
args是一个字符串设置新窗口的属性，多个属性已,号隔开：
height、width——窗口设置，不能小于100
top left——窗口位置
locaion——yes、no：是否显示地址栏
menubar——yes、no：是否显示菜单栏
resizable——yes、no是：否允许拖动浏览器窗口改变大小
srcollbars——yes、no：是否允许滚动显示
status——yes、no：是否允许显示工具栏
// window方法
// 将窗口移动到x、y位置
window.moveTo(x,y):
// 将窗口相对原来的位置移动offsetX、offsetY距离
window.moveBy(offsetX,offsetY):
// 调整窗口大小到w,h
window.resizeTo(w,h):
// 在原来大小基础上调整窗口deltaX、deltaY
window.resizeBy(deltaX,deltaY):
// 关闭窗口
window.close():
*/
// 通过sub_window访问子窗口变量属性
sub_window = window.open("00.test.html","newwin","height=300,width=300,top=0,left=0")
// sub_window.document.write("hello world")
</script>
</body>
</html>
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
a = 10
b = 11
// 打开当前窗口
function hello(){
console.log("hello world")
}
// document.write(window.top.name)
// console.log("opener:",window.opener)
console.log("opener:",window.opener)
// if (window.opener!=null){
// window.document.write("您是我的父窗口")
// }
</script>
</body>
</html>
location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
height: 1000px;
border: 1px solid #f00;
}
</sytpe>
</head>
<a href="#name1">name1</a>
<dev class="container">
</dev>
<!--站内锚点-->
<a name="name1" />
<p>想访问这里</p>
<body>
<script type="text/javascript">
// http://127.0.0.1:8848/JavaScript\04-BOM对象模型/03-location.html
http://127.0.0.1:8848/JavaScript\04-BOM对象模型/03-location.html?q=1&p=2&l=3#name1
url = window.location
/*
host/hostname - 服务器名，可使用IP，域名，主机名
href
pathname
port
protocol
search
hash
*/
for (i in url){
console.log(i,"==>",url[i])
}
/*
location.replace(url) - 改变位置但不会留下历史记录，用户不能返回到前一个页面
location.reload() - 从浏览器内存中重载当前页面
location.reload(true) - 从服务器上重新加载当前url
*/
</script>
</body>
</html>
窗口对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="" onclick='javascript:
if (confirm("您确定要删除吗?")){
alert("已删除")
}'>删除</a>
<a href="" onclick="javascript:
if (prompt('请输入您的年龄')<18){
alert('18岁以下需要家长陪同观看')
return false
} else {
alert('您是成年人了,自己把控')
}">18岁以下禁止观看</a>
<script type="text/javascript">
/*
alert(message):
告警对话框，显示message，如果message是字符串以外的类型，先转换为string类型
confirm(question):
询问对话框，显示question，同时提供ok与cancel选项，用户点击ok返回true，点击cancel返回false
prompt(question,default):
提示对话框，显示question，与一个文本框；可以提供一个default输入，用户点击ok返回true；否则返回false
*/
// alert("ok")
// alert({})
// function alert_test(){
// a = 0
// while(a<5){
// alert("您真的要走吗?")
// a++
// }
// }
// confirm
// if (confirm("您确定要关闭吗?")){
// alert("关闭")
// }
// function confirm_test(){
// a = 0
// if (confirm("您确定要关闭吗?") && a<5){
// confirm_test()
// a++
// }
// }
// // prompt
// age = prompt("您多大啦?",10)
// console.log(age)
</script>
</body>
</html>
![]()
![]()
定时器
超时定时器——延后一定时间再执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
setTimeout(func,delay):
延迟delay毫秒后执行func,func可以是字符串也可以是函数
改方法会返回一个ID,代表改定时器对象
延迟delay后,不立即执行func,需要等待队列中其他任务完成（浏览器是单线程执行JavaScript）
clearTimeout(ID):
取消该定时器
*/
function out(){
console.log("hello world")
}
// 第一个参数是超时后执行的函数,第二个参数是延迟多少毫秒
setTimeout(out,5000)
// setTimeout可以返回定时器id,该id可用于取消定时器
timeId = setTimeout(out,3000)
// clearTimeout取消定时器
setTimeout(function(){
clearTimeout(timeId)
},4000)
</script>
</body>
</html>
间隔定时器——每隔一定时间执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 间隔定时器从上一次间隔一定时间后再次执行
function out(){
console.log("ok")
}
// 第一个参数是超时后执行的函数,第二个参数是延迟多少毫秒
// setInterval(out,1000)
timeId = setInterval(out,1000)
// clearInterval取消间隔定时器
setTimeout(function(){clearInterval(timeId)},5000)
// // 利用setTimeout也可以实现间隔定时器功能
// // 超时间隔定时器等待函数执行完所有代码后再执行定时器
// // setInterval指定间隔随时执行,而不会等待函数执行状态
// function out(){
// console.log("hello world")
// setTimeout(out,1000)
// }
// setTimeout(out,1000)
</script>
</body>
</html>
![]()
navigator对象
- 通过navigator对象可以识别出浏览器客户端相关信息
- 通过搜集navigator信息可以获知网站用户的上网信息，比如浏览器版本，系统平台，使用语言及浏览器插件等等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
navigator对象提供用户浏览器的代理信息，包含用户的系统信息、浏览器信息等
通常用来判定客户端类型，比如pc还是移动、window或mac
其中的userAgent通常都是爬虫需要设置的头信息
*/
for (i in navigator){
console.log(i,"==>",navigator[i])
}
function isPc(){
var userAgentInfo = navigator.userAgent;
var Agents = ["Android","IPhone","SymbianOS","Windows Phone","Ipad","Ipod"];
var flag = true;
for (var v = 0;v < Agents.length;v++){
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
</script>
</body>
</html>
![]()
setTimeout
- 延迟delay毫秒后执行func,func可以是字符串也可以是函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
setTimeout(func,delay):
延迟delay毫秒后执行func,func可以是字符串也可以是函数
该方法会返回一个ID,代表改定时器对象
延迟delay后,不立即执行func,需要等待队列中其他任务完成（浏览器是单线程执行JavaScript）
clearTimeout(ID):
取消该定时器
*/
function out(){
console.log("hello world")
}
// 第一个参数是超时后执行的函数,第二个参数是延迟多少毫秒
setTimeout(out,5000)
// // setTimeout可以返回定时器id,该id可用于取消定时器
timeId = setTimeout(out,3000)
// clearTimeout取消定时器
setTimeout(function(){
clearTimeout(timeId)
},4000)
</script>
</body>
</html>
setinterval
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 间隔定时器从上一次间隔一定时间后再次执行
function out(){
console.log("ok")
}
// 第一个参数是超时后执行的函数,第二个参数是延迟多少毫秒
// setInterval(out,1000)
// timeId = setInterval(out,1000)
// clearInterval取消间隔定时器
// setTimeout(function(){clearInterval(timeId)},5000)
// 利用setTimeout也可以实现间隔定时器功能
// 超时间隔定时器等待函数执行完所有代码后再执行定时器
// setInterval指定间隔随时执行,而不会等待函数执行状态
// function out(){
// console.log("hello world")
// setTimeout(out,1000)
// }
// setTimeout(out,1000)
</script>
</body>
</html>
history
- history对象记录用户的历史访问记录，但开发人员无法获得具体的历史记录信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// window.location = "http://www.baidu.com"
// window.location = "http://www.sina.com"
// window.location = "http://www.126.com"
// window.location = "http://www.python-xp.com"
/*
history对象记录用户的历史访问记录，但开发人员无法获得具体的历史记录信息
可实现前进后退控制：
history.go(n):
当n为正,历史记录向前n的记录;n为负,历史记录向后n的记录
history.go(-1),后退一页
history.go(1),前进一页
history.go(url):跳到最近包含url的历史记录
history.back():后退
history.forward():前进
*/
</script>
</body>
</html>
浙公网安备 33010602011771号