码迷,mamicode.com
首页 > Web开发 > 详细

10-JS BOM基础

时间:2020-01-22 18:17:51      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:val   移动设备   cli   history   cpu   result   family   获取   str   

 

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浏览器‘);
}

10-JS BOM基础

标签:val   移动设备   cli   history   cpu   result   family   获取   str   

原文地址:https://www.cnblogs.com/mingliangge/p/12207686.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!