-
window对象
-
定时器
-
页面时钟
-
地址栏对象
-
历史记录对象
-
URL编码
1.浏览器对象模型的基本概念
2.window对象与弹出有关的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function del() {
//2.弹出确认取消框
var flag = window.confirm("你确认删除吗？"); //返回true表示确认，返回false表示取消
if (flag) {
document.write("删除操作")
} else {
document.write("取消删除")
}
}
function input() {
var text = window.prompt("请输入你的收货地址");
document.write(text);
}
</script>
</head>
<body>
<a href="javascript:void(del())">删除</a>
<a href="javascript:void(input())">请填写收货地址</a>
</body>
</html>
3.window对象与打开关闭有关的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function intoWeb() {
//打开窗口,返回的是新打开的窗口对象
//var newWindow=window.open("http://www.163.com");
//跳转到自己站点的页面，返回的是新打开的窗口对象
myWindow=window.open("index.html");
}
function gb(){
window.close();
}
function gb2(){
if(window.confirm("确认关闭窗口吗？")){
myWindow.close();
}
}
</script>
</head>
<body>
<a href="http://www.sina.com">进入新浪</a>
<button type="button" onclick="intoWeb()">进入网页</button>
<a href="javascript:void(gb())">关闭本窗口</a>
<a href="javascript:void(gb2())">关闭新打开的窗口</a>
</body>
</html>
4.window对象与定时器有关的方法
执行一次的定时器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//执行一次的定时器
/* function show(){
alert("砰 爆炸了！")
}
window.setTimeout(show,2000);
//window.setTimeout("show()",1000); */
//设置定时器，返回的是定时器的id
var timerID=window.setTimeout(function(){
alert("砰 爆炸了！");
},2000);
//可以根据定时器的id取消定时器
window.clearTimeout(timerID);
</script>
</head>
<body>
</body>
</html>
循环定时器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var timerID=window.setInterval(function(){
console.log("循环定时器执行了")
},1000)
function qx(){
window.clearInterval(timerID);
}
</script>
</head>
<body>
<a href="javascript:void(qx())">取消定时器</a>
</body>
</html>
5.页面时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="time">2022-01-07 09:39:20</h1>
</body>
<script type="text/javascript">
function showTime() {
//获取h1标签对象
var h1 = document.getElementById("time");
//设置标签之间的内容
var time = new Date().toLocaleString();
h1.innerText = time;
}
//先手动调用一次
showTime();
//循环调用
window.setInterval(showTime, 1000);
</script>
</html>
6.window对象中的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//BOM中其他对象，都是通过window对象的属性获取的
var loc=window.location;
var his=window.history;
var nav=window.navigator;
var scr=window.screen;
//获取html文档对象
var doc=window.document;
</script>
</head>
<body>
</body>
</html>
7.地址栏对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//获取地址栏对象
//var loc=window.location;
//loc.href="http://www.baidu.com";
//window.location.href="http://www.baidu.com";
//window可以省略不写
//href 设置或返回完整的 URL。
//location.href="http://www.baidu.com";
//var text=location.href;
//alert(text);
//URL：统一资源定位符
//URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
//也可认为由4部分组成： 协议、 主机、 端口、 路径
//URL的一般语法格式为：
// (带方括号[] 的为可选项)：
//protocol: // hostname[:port] / path / [:parameters][?query]#fragment
//https://192.168.10.1:8080/path
var hostname=location.hostname;
var host=location.host;
var protocol=location.protocol;
var pathname=location.pathname;
var search=location.search;
var port=location.port;
alert(hostname);
alert(host);
alert(protocol);
alert(search);
alert(port);
function sx(){
//刷新页面
location.reload();
}
</script>
</head>
<body>
<button type="button" onclick="sx()">刷新</button>
</body>
</html>
从index页面跳转到demo页面获取search内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<h1>我的首页</h1>
<a href="demo.html?username=zhangsan&password=123456">跳转到demo页面携带参数</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var text=location.search; //获取?后面的参数
//alert(text); ?username=zhangsan&password=123456
var arr=text.replace("?","").split("&");
alert(arr[0]);
alert(arr[1]);
</script>
</head>
<body>
<h1>demo页面</h1>
</body>
</html>
URL的详细格式：
8.历史记录对象
b页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function qj(){
//window.history.forward();
window.history.go(1); //给正数前进
}
</script>
</head>
<body>
<h1>b页面</h1>
<a href="c.html">进入c页面</a>
<a href="javascript:void(qj())">前进</a>
</body>
</html>
c页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function ht(){
//window.history.back();
window.history.go(-1);//给负数就是后退
}
</script>
</head>
<body>
<h1>c页面</h1>
<a href="javascript:void(ht())">返回</a>
</body>
</html>
9.URL编码解码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//浏览器的地址栏，会自动对地址栏里面的内容进行 URL编码
/* decodeURI() 解码某个编码的 URI。 1 5.5
encodeURI() 把字符串编码为 URI。 1 5.5
decodeURIComponent() 解码一个编码的 URI 组件。 1 5.5
encodeURIComponent() 把字符串编码为 URI 组件。
*/
var name="我爱你们";
//编码
var code=encodeURI(name);
document.write(code);
//解码
var text=decodeURI(code);
document.write(text);
</script>
</head>
<body>
</body>
</html>
10.浏览器对地址栏里的内容进行解码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var url=location.href;
document.write(url);
document.write("<hr>");
var v=decodeURI(url);
document.write(v);
</script>
</head>
<body>
</body>
</html>
