1.BOM概念
- BOM(Browser Object Mode):浏览器对象模型
通过window对象来控制bom,在鹅湖段JavaScript中，Window对象是全局对象，所有表达式都在当前环境中计算
2.系统对话框
浏览器可以通过系统对话框，向用户显示信息。系统提供了三个函数，可以完成系统对话框的操作
-
alert()
直接弹出警告框
【参数】：警告框上显示的内容 -
confirm()
【功能】：弹出一个带有确定和取消按钮的警告康
【返回值】：如果点击确定，返回true，点击取消，返回false -
prompt()
【功能】：弹出一个带输入框的提示框
【参数】：第一个参数：要在提示框上显示的内容
第二个参数：输入框内默认的值
【返回值】：点击确定：返回值是输入的内容；点击取消，返回值是null
3.bom–open方法
- open()
【参数】：参数一：要加载的uri。参数二：窗口的名称或者窗口的目标。参数三：一串具有特殊意义的字符串
具体如下：
<script type="text/javascript">
window.onload=function()
{
var a=document.getElementById("btn");
a.onclick=function()
{
open"http://www.baidu.com"//【注】：如果只有第一个参数，调用open方法会打开新窗口，加载url
open("http://www.baidu.com","百度","width=400px,height=400px,top=500px,left=200px")
//【注】第二个参数，是给打开的新的窗口起一个名字，以后再去加载url，就在这个已经起好名字的目标窗口加载url
}
}
</script>
还有一个opener对象，可以通过他调用打开这个窗口的 父窗口的对象，具体使用方法如下
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>parent</title>
<style type="text/css">
body{
background-color: #FF0000;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var p=document.getElementById("btn");
p.onclick=function()
{
open("child.html","child","width=400px,height=400px,top=500px,left=200px");
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="跳转子页面" />
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>child</title>
<style type="text/css">
body{
background-color: #800080;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("btn");
c.onclick=function()
{
opener.document.write("输出输出")
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="输出" />
</body>
</html>
4.bom–location属性
alert(location);
alert(window.document.location);
alert(window.location);三者是相等的
alert(window.location==window.document.location);//true
具体如下：
<script type="text/javascript">
/*
location 我们浏览器上的地址栏输入框
【注】他提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
*/
alert(location.hash);//锚点 #1 实现业内跳转
location.hash="#3";//可赋值
alert(location.host);//IP:端口号
alert(location.hostname);//域名/IP
//【注】：域名就是给IP起一个好听点的名字
alert(location.href);//整个url
alert(location.pathname);//路径名
alert(location.port);//端口号
alert(location.protocol);//协议
//http: 网络协议 file：本地协议
alert(location.search);//查询字符串，跟在？后的部分
location.search="?id=xxx"//可赋值
/*url 统一资源定位符
protocol(协议):host(主机名):port(端口号)/pathname(路径)?search(查询字符串)#hash(锚点)
http://www.baidu.com:8080/code/xxx.html?username=xxx#1
*/
</script>
| 方法 | 功能 | 备注 |
|---|---|---|
| assign() | 跳转到指定页面，与href等效 | 如果传参，参数为true的时候，强制加载，从服务器源头重新加载（忽略缓存） |
| reload() | 重载当前url | |
| replace() | 用新的url替换当前页面 | 可以避免产生跳转前的历史记录 |
5.history对象
- history是window对象的属性，他保存这个用户上网的记录
- 属性： history.length
【功能】：返回当前history对象中记录的历史记录的条数
| 方法 | 功能 | 备注 |
|---|---|---|
| history.back | 前往浏览器历史目前前一个URL，类似后退 | |
| history.forward() | 前往浏览器历史条目下一个URL，类似前进 | |
| history.go(num) | 浏览器在history对象中向前或向后 | 参数：0重载当前页面；正数前进对应数量的记录；负数后退对应数量的记录 |
6.小例子：bom–search的处理
在Web开发中，经常需要获取诸如?id=5&search=ok这种类型的URL键值对，通过location，写一个函数
具体代码如下：
<script type="text/javascript">
/*?id=5&serach=ok
获取url中的search，通过传入对应key，返回key对应的value
例子：传入id，返回6
*/
function getValue(search,key)
{//<1>找出key第一次出现的位置
var start=search.indexOf(key);
if(start==-1)
{
return;
}else{
//<2>找出键值对结束的位置
var end=search.indexOf("&",start);
if(end==-1)
{
//这是最后一个键值对
end=search.length;
}
}
//<3>将这个键值对提取出来
var str=search.substring(start,end);
//<4>key=value 获取value
var arr=str.split("=");
return arr[1];
}
var search="?id=5&serach=ok";
alert(getValue(search,"serach"));
</script>
输出：ok
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
