对BOM进行一下总结
1. location 对象
location既是window也是document的属性,所以二者在使用的时候引用的是同一个location对象
location参数解析:
location.href: 返回完整的url
location.host: 返回主机名和端口号。 eg: www.baidu.com:80
location.hostname: 返回主机名。 eg: www.baidu.com
location.search: 返回查询字符串。包括?.例如 ?q=javascript
location.protocol:返回协议名。例如: http:
location.pathname: 返回文件路径。例如: /search
location.port: 返回端口号。例如 80
对搜索字符串进行查询参数提取
<span style="font-size:18px;">function parseUrl(){
// 如果查询字符串存在,返回?以后的字符。反则返回 ''
var query = location.search.length? location.slice(1): '';
var args = {}; // 用来保存查询参数
// 对query进行分割。
var item = query.length? query.split('&'):[];
var keyVal;
// 遍历item,将查询参数以 key,value形式保存到args
item.forEach(function (ele, index) {
keyVal = ele.split('=');
args[keyVal[0]] = keyVal[1];
});
return args;
}</span>
location 位置操作
location.assign()。 传递一个url,将会打开新窗口。并生成一条历史记录
使用location.href以及window.location设置值打开新窗口调用该方法。
location.reload() 方法会优先选取比较有效的加载方式,即从缓存中加载页面。传参为true的时候,强制刷新,将会从服务器获取页面。
location.replace() 传入一个url的时候,将会生成新的历史记录。
即使用该方式加载一个新的页面的时候,无法返回到上一页面~
2. history 对象
history.go() 表示从历史记录中加载某一页面。
传入 负数 -n 的时候,便是后退 n个页面
传入 正数 n, 表示前进 n个页面
传入 字符串 str 的时候,将会优先加载最近的href中含有str的页面。如果历史记录不含有该字符串,就什么都不做。
history.back() history.forward() 模仿浏览器的后退/前进按钮。每次跳转一个页面。
history.length 返回历史记录条数。通常用来判断是否直接打开某一个页面。
3. navigator 对象
经常被用来进行浏览器类型检测。常用的属性包括 useragent
详细的会在对javascript第九章进行总结之后再放上来
4. screen 对象
使用频率较低。主要是显示浏览器外部显示信息,例如: 宽高
5. window 对象(核心)
在js中,未使用var 声明的变量/方法会直接被归为window对象的属性/方法。 其中 全局变量不能被删除。而window对象的属性可以被删除。
<span style="font-size:18px;">color = "red"; console.log(window.color); // red var blue = "blue"; console.log(delete blue); // false console.log(delete color); // true</span>
窗口关系和框架。
在使用框架集的时候
top: 始终指向最外层的框架,也就是浏览器窗口
parent:指向当前框架的上层框架,可能等于top
self: 指向window对象
也可以使用window.frame[0],window.frame[1]来进行框架访问。
窗口位置及大小
resizeTo(w, h)表示调整大小至宽为w,高为h
resizeBy(w, h)表示在原基础上宽增加/减少 w, 高增加/减少h
moveTo(x, y)表示将浏览器窗口位置移动到屏幕 (x,y) 坐标处
moveBy(x, y)表示将浏览器窗口位置在原坐标基础上横坐标改变 x, 纵坐标改为 y
document.body.clientWidth / document.documentElement.clientWidth页面视口大小(注意兼容性问题)
document.body.clientHeight / document.documentElement.clientHeight
// 获取当前浏览器视口大小
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth !== 'number' ) {
// 不支持innerWidth/innerHeight
if(document.compatMode === 'CSS1Compat') { // 判断是否处于标准模式
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clinetHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
由于兼容性问题,很难准确获得窗口大小。但以上方法获取视口大小还是可以的。
打开窗口
window.open() 传入三个参数。
第一参数为url。
第二个参数表示已有窗口或框架的名字。
第三个参数表示所要打开的窗口的特性。包括: top,left,height,width,location,status,scrollBars,resizable等。
返回的对象是一个指向新窗口的引用。可以通过该引用对新窗口进行调整大小、位置移动等
<span style="font-size:18px;">var newWin = window.open("http:www.baidu.com", "nwewindow", "top=200,left=200,width=400,height=400,resizable=true");
newWin.resizeTo(600,600);
console.log(newWin.opener == window); // true. newWin.opener指向调用window.open() 的原始窗口
newWin.opener = null; // 切断newWin与之前窗口的联系,如果需要标签页通信,就不可以切断。一旦切断,不可恢复。
newWin.close(); // 关闭新打开的窗口</span></span>
间歇调用和超时调用
setInterval(fn, time) // 传入的第一个参数为函数,第二个时间。
返回值为一个数字ID。通过该ID对间歇调用进行清除
setTimeout(fn , time ) // 可以说是一个定时器。在time时间后,调用fn函数。
返回值为一个数字ID,可以通过该ID在函数未被调用之前清除超时调用
<span style="font-size:18px;">var timer1 = setInterval(function(){
num++;
if (num > 10 ) {
clearInterval(timer1); // 每隔3秒执行函数一次,当num>10的时候,清除间歇调用。
}
}, 3000);
var timer2 = setTimeout(function(){
num++;
}, 10000); // setTimeout被执行10秒后,将会调用该函数。可以使用 clearTimeout(timer2)来在10s到达之前清除调用。
// 在真正的开发中,很少直接使用间歇调用。
// 因为很可能发生本次间歇调用还没结束,下次已经开始。所以使用超时调用模拟间歇调用时很好的方法
function dingshiqi() {
num++;
if (num <= 11) {
setTimeout(dingshiqi, 3000);
}
}
setTimeout(dingshiqi, 3000);
// 以上不用一直追踪超时调用ID, 用来模拟间歇调用
</span>
弹出窗口
alert() 弹出提示框
confirm() 弹出确认框。
prompt() 弹出验证框。
<span style="font-size:18px;">if (confirm("are you sure ?") ) { // 弹出确认框,如果返回值为确认
var yourname = prompt("请输入你的名字:"); // 弹出验证框
if (yourname) { // 用户输入姓名
alert(yourname); // 弹出用户姓名
} else { // 点击取消
alert("您已经取消输入!");
}
} else {
alert("what a pity ! ");
}</span>
以上~