10-JS BOM基础

Posted 2021-03-14 戒奢从简，起早贪黑，努力提升

 

window对象方法

 

定义一个全局变量

var abc = 12 等同与 window.abc = 12

 

调用一个全局函数

abc()  等同于 window.abc()

 

弹窗

alert()   等同于   window.alert()

 

confirm()

confirm()   等同于  window.confirm()      //（对话弹窗）

如：<input id="mm" type="button" value="删除">

var mm = document.getElementById("mm");

mm.onclick = function(){

var result = window.confirm("你确定要删除吗");

if(result)  alert("删除");

else   alert("取消");

}

 

window.prompt

window.prompt("提示文本","提示框默认文本")；

按确认时，返回值为文本框内容；按取消时，返回值为null

 

window.open

window.open("url","name","parameters")  //打开一个新窗口

url：子窗口的url地址

name：给子窗口的名字

parameters：子窗口的各种参数，用逗号隔开


parameters参数：

width：子窗口宽度  /  height：子窗口高度  /  left：子窗口x轴坐标  /  top：子窗口y轴坐标

toolbar：是否显示浏览器工具栏  /  menubar：是否显示菜单栏

scrollbars：是否显示滚动条  /  location：是否显示地址字段

status：是否添加状态栏

 

window.close() 

window.close()    //关闭当前浏览器窗口

如：btn.onclick = function(){window.close();}

 

setTimeout

setTimeout("alert(123)",2000)      //超时调用。第一个参数可以是函数名/代码串。在2000毫秒后弹出123

 

clearTimeout

clearTimeout(rew)     //清除超时调用。里面的参数是函数名

 

setInterval

setInterval(wer,1000)      //间歇调用。每隔1000毫秒调用一次wer函数

 

clearInterval

clearInterval(wer)         //清除间歇调用

 

 

 

location对象属性

//location 既属于window对象，也属于document对象

 

location.href      //返回当前页面完整的url地址。等价于window.location.href

location.pathname       //返回url中的目录和（或）文件名

 

location.host         //返回当前服务器的名称和端口号

location.hostname       //返回当前服务器名称

location.host            //返回当前服务器的端口号

 

location.hash            //返回当前url地址#后面的内容，包括#；如果没有#，则返回空字符串。

location.search        //返回当前url地址?后面的内容，包括?；如果没有?，则返回空字符串。

 

location.protocol      //返回页面使用的协议

 

location对象方法

更改url地址

setTimeout(function(){

location.href = "index2.html";      //1秒后跳转到index2页面。有历史记录

window.location = "index2.html";      //1秒后跳转到index2页面。有历史记录

//同样location.hash和location.search也可以更改url地址

location.replace("index2.html");      //1秒后跳转到index2页面。无历史纪录

},1000)

 

模仿浏览器后退按钮

history.back()  或者   history.go(-1)

 

模仿浏览器前进按钮

history.forward()   或者   history.go(1)

ps：history.go可以前进后后退n步

 

 

 

screen对象及属性

获取网页宽高

获取网页宽高    //固定的。网页最大化，不带工具栏，的宽高

screen.availWidth   /   screen.availHeight

 

获取网页的宽高

获取网页的宽高      //会随着宽口浏览器大小的变化而变化

window.innerWidth   /   window.innerHeight

 

 

navigator对象

userAgent属性：一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

 

var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
//浏览器版本信息
trident: u.indexOf(‘Trident‘) > -1, //IE内核
presto: u.indexOf(‘Presto‘) > -1, //opera内核
webKit: u.indexOf(‘AppleWebKit‘) > -1, //苹果、谷歌内核
gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘KHTML‘) == -1, //火狐内核

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android终端或uc浏览器

iPhone: u.indexOf(‘iPhone‘) > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf(‘iPad‘) > -1, //是否iPad
webApp: u.indexOf(‘Safari‘) == -1 //是否web应用程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

 

 判断pc端跟移动端

if (browser.versions.mobile) console.log(‘移动设备‘);
else console.log("PC设备");

 

判断是安卓还是苹果

if (browser.versions.ios) {
console.log(‘IOS系统‘);
}
if (browser.versions.android) {
console.log(‘Android系统‘);
}

 

判断用的是什么浏览器

if (browser.versions.trident) {
console.log(‘IE浏览器‘);
}
if (browser.versions.presto) {
console.log(‘opera浏览器‘);
}
if (browser.versions.webKit) {
console.log(‘Safari或Chrome浏览器‘);
}
if (browser.versions.gecko) {
console.log(‘Firefox浏览器‘);
}