javascript window对象
1、Window对象及下属属性方法
BOM (Browser Objeect Model)
BOM 就是浏览器的对象模型
例：
alert(window);//windowd对象，当前浏览器上打开的一个窗口。
浏览器可以通过调用系统对话框，向用户显示信息。
系统提供了三个函数，可以完成系统对话框的操作。
【注】Window的函数，都可以省略window直接去调用。
alert()直接弹出警告框,参数是警告框上显示的内容。
confirm()弹出一个带有确定和取消按钮警告框，
【返回值】如果点击确定返回true，如果点击取消返回false。
var res = confirm("请选择确定和取消");
alert(res);
prompt( )
【功能】弹出一个带输入框的提示框。
【参数】第一个参数:要在提示框上显示的内容。
第二个参数:输入框内默认的值。
【返回值】点击确定:返回值是输入的内容
点击取消:返回值是null
var res = prompt("请输入内容",10);//参数2可以是任何数据类型。
alert(res);//10
Window. open( )
open( )
1、要加载URL
2、窗口的名称或者窗口的目标
3、一串具有特殊意义的字符串
window.onload = function( ){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
//open( "http://WWw.baidu.com");
//【注】如果只有第一个参数，调用open方法会打开新窗口，加载url。
//open( "http://WWw.baidu.com","百度");
//【注】第二个参数,给打开的新窗口起一个名字,然后以后再去加载URL，
// 就在这个已经起好名字的目标窗口加载URL。
//open( "http://WWw.baidu.com",width=400, height=400,
// top=200,left=200);
}
}
</script>
<body>
<input type="button" value="按钮" id="btn" />
</body>
2、location 对象
我们在浏览器上地址栏输入框。
【注】他提供与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
alert(window.location);
alert(location);
alert(window.document.location);
alert(window.location == window.document.location);
location的属性
url 统一资源定位符（快递上一个地址）
location.hash 锚点 #1 实现页面内的跳转
//alert(location.hash);
window.onload = function(){
document.onclick = function(){
location.hash = "#3";
}
}
host 主机名：端口号 浏览器的端口号 默认8080
IP 通过ip，我们可以在全球范围内找到我这台电脑所使用的网络的地址。
IP 端口号 通过网络的软件，在当前电脑内唯一的标识
hostname 主机名 域名/IP
【注】域名就是给IP起一个好记的名字
alert(location.hostname);//127.0.0.1
href 整个url
alert(location.hrf);
ptthname 路径名
alert(location.pathname);
location.port 端口号（默认隐藏）：是当前电脑使用的的软件随机分配的一个编号 0~655
hostname.port 可以直接定位定位到当前使用网络的程序
小细节：浏览器 8080
http 80
https 443
protocal 协议
http:网络协议
https:(证书认证协议)
file:本地文件协议
alert(location.protocol);//http:
search 查询字符串（前后端交互）
跟在？后面的部分
例：?name1=value1&mane2=value2
//lert(location.search);
window.onload = function(){
document.onclick = function(){
location.search = "?xxx=ttt&age=18";
}
}
url 统一资源定位符：
protocol(协议):host(主机名):port(端口号)/pathname(路径)?查询字符串（search）#锚点（hash）
http://www.baidu.com:8080/code/xxx.html?username=xxx&age=18#1
3、location 对象方法属性
assign() 跳转到指定的URL。
reload() 从在当前URL。
可以传参,参数为true的时,强行加载，从服务器源头重新加载。
replace() 用新的URL替换当前页面，可以避免产生跳转前的历史记录。
不可以前进或后退按钮
1 <script type="text/ecmascript"> 2 3 window.onload = function(){ 4 var oBtn =document.getElementById("btn"); 5 oBtn.onclick = function(){ 6 //location.assign("http://www.baidu.com"); 7 //location.reload(); 8 //location.reload(true); 9 location.replace("http://www.baidu.com"); 10 } 11 } 12 13 </script> 14 15 </head> 16 <body> 17 <input type="button" value="按钮" id="btn" /> 18 </body>
4、history
history是window对象的属性,他保存这个用户上网的记录
属性
history.length 返回当前history对象中的记录数
历史记录的条数
方法
history.back() 返回上一条历史记录。类似于后退。
history.forward() 前进到下一条历史记录，类似于前进。
history.go()
参数：0重载当前页面
正数 前进对应数量的记录
负数 后退对应数量的记录
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>docoment</title> 6 <script type="text/ecmascript"> 7 8 window.onload = function(){ 9 var oBtn =document.getElementById("btn"); 10 oBtn.onclick = function(){ 11 alert(history.length); 12 } 13 var oForword = document.getElementById("forward"); 14 oForword.onclick = function(){ 15 history.forward(); 16 } 17 var oBack = document.getElementById("back"); 18 oBack.onclick = function(){ 19 history.back(); 20 } 21 var oGo= document.getElementById("go"); 22 oGo.onclick = function(){ 23 //history.go(0); 24 history.go(2); 25 //history.go(-2); 26 } 27 } 28 29 </script> 30 </head> 31 <body> 32 <input type="button" value="记录" id="btn" /> 33 <input type="button" value="前进" id="forward" /> 34 <input type="button" value="后退" id="back" /> 35 <input type="button" value="go" id="go" /> 36 </body> 37 </html> 38 39 </script>
boon - search 处理
1 2 3 <script type="text/ecmascript"> 4 /* ?id=5&search=ok 5 获取url中search,通过传入对应key,返回key对应的value。 6 例子:传入id,返回5 7 */ 8 function getValue(search, key){ 9 //<1>找出key第次出现的位置 10 var start = search. indexOf(key); 11 if(start == -1){ 12 return ; 13 }else{ 14 //<2>找出键值对， 结束的位置 15 var end = search. indexOf("&", start); 16 if(end == -1){ 17 //这是最后一个键值对 18 end = search.length; 19 } 20 } 21 //<3>将这个键值对应值取出来 22 var str = search.substring(start,end); 23 //<4>key value 获取valve 24 var arr = str.split("="); 25 return arr[1]; 26 } 27 var search = "?id=5&search=ok"; 28 alert(getValue(search,"search"));//ok 29 alert(getValue(search,"id"));//5 30 31 32 </script>
