您的位置：首页 > Web前端 > JavaScript

JavaScript之BOM的五类对象简介

2017-08-16 15:27 190 查看
（1） location对象：地址栏对象
<script>

console.log(location.href);
/*完整的（路径即url）*/
console.log(location.protocol);
/*协议*/
console.log(location.port);
/*端口号*/
console.log(location.hostname);
/*主机名称*/
console.log(location.pathname);
/*路径名称*/
console.log(location.search);
/*？后面的数据部分*/
</script>
<body>
<button onclick="assign()">加载新页面</button>
<button onclick="replace()">替换页面</button>
<button onclick="reload1()">刷新当前页面</button>
<button onclick="reload2()">彻底刷新当前页面</button>
</body>
<script>
function assign() {
/*可以返回老页面*/
location.assign("http://baidu.com");
}
function replace() {
/*不能返回老页面*/
location.replace("http://baidu.com");
}
function reload1() {
location.reload();
}
function reload2() {
location.reload(true);
}
</script>

（2）window对象常用方法：

prompt
提示框，提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消

按钮才能继续操纵。
alert
警告框，警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
confirm
确认框，确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行

操作。

close
打开页面
open
关闭页面
setTimeout
未来的某时执行代码，但只会执行一次
setIntervar
根据指定的时间，循环执行
clearInterval
取消setIntervar


clearTimeOut
取消setTimeout
<body>
<button onclick="close1()">关闭</button>
<button onclick="openNewPage()">打开</button>
<button onclick="show()">五秒后显示Hello World</button>
<button onclick="cancelshow()">取消显示Hello World</button>
<button onclick="cancelshow2()">取消循环显示Hello World</button>
</body>
<script>
var flag =confirm("确认要删除此条信息吗？")
if (flag){
alert("删除成功");
}else {
alert("您已取消了删除");
}

function close1() {
window.close();
}
function openNewPage() {
window.open("Demo38.html","BOM","width=300px,height=300px",
"left=20px")
}
/*定时器：setTimeout：几秒钟后执行某一函数，但只会执行一次*/
var hello;
function show() {
hello =
setTimeout(function () {
alert("Hello World");
},5000);
}
function cancelshow() {
clearTimeout(hello);
}
</script>
<script>
var hell2;
/*定时器：setInterval:根据指定的时间，循环执行*/
hell2 = setInterval(function
() {
console.log("Hello World");
},5000);
function cancelshow2() {
clearInterval(hell2);
}
</script>

（3）screen对象：屏幕对象

<script>
console.log(screen.width);
屏幕的总宽度

console.log(screen.height);
屏幕的总高度
console.log(screen.availWidth);
可用的屏幕宽度
console.log(screen.availHeight);
可用的屏幕高度
</script>

（4）history对象：历史路径

function forward() {
history.forward();
/*下一个页面*/
}

function back() {
history.back();
/*上一个页面*/
}

function urlLength() {
history.length();
}
function go(index) {
history.go(index);
/*往前跳几个页面*/
}

<body>
<a href="Demo34.html">Demo34</a>
<button onclick="forward()">下一个页面</button>
<button onclick="go(2)">Demo35</button>
</body>
<script src="../../js/history.js"></script>

（5）Navigation：导航器对象

<script>
console.log(navigator.appName);
/*产品名称*/
console.log(navigator.appVersion);
/*版本号*/
console.log(navigator.userAgent);
/*用户代理信息*/
console.log(navigator.platform);
/*系统平台信息*/
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JavaScript BOM
相关文章推荐
新的分享
章节导航