JavaScript之BOM的五类对象简介

来源：互联网发布：百度云盘mac版下载编辑：程序博客网时间：2024/05/24 04:47

（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>

阅读全文

0 0