一、BOM-window简介
①window.location.href和window.location.assign均可跳转页面，支持回退
②window.location.replace可以跳转页面，不支持回退
③window.location.reload刷新页面，传入参数true时，强制刷新，不留缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM window</title>
<style>
body {
background-color : red;
}
</style>
</head>
<body>
<button οnclick="href()"> 跳转 </button>
<button οnclick="refresh()"> 刷新 </button>
<button οnclick="func()"> 加载 </button>
<button οnclick="repl()"> repl</button>
<script>
// BOM 对象 document
document.write("<br/>");
document.write(window.document);
document.write("<br/>");
// 展示 当前页面中的所有框架的集合
document.write(window.frames);
document.write("<br/>");
// 用于反应浏览器及其功能的对象
document.write(window.navigator);
document.write("<br/>");
// 提供浏览器以外的环境信息
document.write(window.screen);
document.write("<br/>");
// window.location
// 跳转页面
function href() {
window.location.href = "js_math_demo.html";
}
// 刷新，可穿参数true，强制刷新不留缓存
function refresh(){
window.location.reload();
}
// assign()
// 加载新的页面
function func(){
window.location.assign("js_math_demo.html");
}
// 加载新页面，不能回退
function repl(){
window.location.replace("js_math_demo.html");
}
</script>
</body>
</html>
二、window.history对象
①获取历史长度window.history.length
②下一页window.history.forward
③上一页window.history.back
④跳转至指定页面window.history.go，是正数时前进，是负数时后退
三、window函数及事件
Ⅰ函数
①打开新窗口open
②关闭当前窗口close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM window 函数</title>
</head>
<body>
<button οnclick="openWindow()"> 打开新窗口 </button>
<button οnclick="closeWindow()"> 关闭当前窗口 </button>
<script>
// open
function openWindow(){
window.open("BOM_window_demo.html","blank","width=200px, height=200px, top=10px, left=10px");
}
// close
function closeWindow(){
window.close();
}
</script>
</body>
</html>
Ⅱ事件
①onload 加载事件：页面加载完成后自动触发
②onscroll 滚动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window 事件</title>
<style>
body {
height : 3000px;
}
</style>
</head>
<body>
<script>
// 事件
// onload 加载事件：页面完成加载后自动触发
window.onload = function(){
document.write("hello");
}
// onscroll 滚动事件
window.onscroll = function (){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
}
</script>
</body>
</html>
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
