BOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/JavaScript">
/*js一共三块
1. ECMAScript 语言的语法和基本对象
2. DOM Document Object Modal 用DOM处理网页内容的方法和接口
3. BOM Browser Object Modal 处理与浏览器进行交互的方法和接口 可以对浏览器窗口进行访问和操作 使用BOM进行开发，可以打开，移动窗口，改变一些文本，以及执行一些与页面内容不直接相关的动作
BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象的都是window对象的子对象
window对象：
1.window.screen 屏幕对象
2.window.location 地址栏对象
3.window.history 历史记录对象
4.window.navigator 浏览器对象
*/
</script>
</body>
</html>
window.history对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
alert(window.history.length);
</script>
</body>
</html>
window.screen对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 3000px;
}
</style>
</head>
<body>
<script type="text/javascript">
/* window.screen对象
包含有关客户端显示屏幕的信息。
属性：
1.availHeight 返回显示屏幕的可用宽度（除window任务栏之外）
2.availWidth 返回显示屏幕的可用宽度
3.height 返回显示屏幕的总高度
4.width 返回显示屏幕的总宽度
*/
document.write("屏幕总高度：" + screen.height + "px</br>");
document.write("屏幕总宽度：" + screen.width + "px</br>");
document.write("屏幕可用高度：" + screen.availHeight + "px</br>");
document.write("屏幕可用宽度：" + screen.availWidth + "px</br>");
</script>
</body>
</html>
window.close用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function openWin(){
myWindow = window.open("","","width=200,height=100");
myWindow.document.write("这是我的窗口");
}
function closeWin(){
// 用于关闭浏览器窗口
myWindow.close();
}
</script>
</head>
<body>
<input type="button" name="" id="" value="打开窗口" onclick="openWin()" />
<input type="button" name="" id="" value="关闭窗口" onclick="closeWin()"/>
</body>
</html>
windowHistoryBack用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="goBack()" >回到上一页</button>
<script type="text/javascript">
function goBack(){
window.history.back(); // forward()
}
</script>
</body>
</html>
windowLocation-Reload方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="reload" onclick="reloadPage()" />
<script type="text/javascript">
// reload()方法，用于刷新当前文档，类似于浏览器上的刷新页面按钮，如果把该方法的参数设置为true，那么无论文档最后修改日期是什么，他都会绕过缓存，从服务器重新下载该文档，这与用户在单击浏览器下刷新按钮时按住shift键（cmd + shift + r）的效果是完全一样的
function reloadPage() {
// reload方法里面可以有参数，如果参数是true，表示强制刷新，没有的时候，默认为false，也就是如果缓存里面有，就不重新加载，没有重新加载
window.location.reload();
}
</script>
</body>
</html>
windowLocation对象方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// Location对象包含有关当前URL的信息，主机域名，当前页面路径，完整URL（网址）
// window.location对象提供了属性，来得到主机域名，当前页面路径，完整URL（网址）等等信息
// 主机域名
alert(window.location.hostname);
// 当前页面路径
alert(window.location.pathname);
// 完整URL（网址）
alert(window.location);
</script>
</body>
</html>
windowNavigator对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// window.navigator对象是浏览器对象
document.write("user-agent header sent:" + navigator.userAgent);
</script>
</body>
</html>
windowNavigator对象2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName:" + navigator.appCodeName + "</p>";
txt += "<p>Browser Name:" + navigator.appName + "</p>";
txt += "<p>Browser Version:" + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled:" + navigator.cookieEnabled + "</p>";
txt += "<p>Platform:" + navigator.platform + "</p>";
txt += "<p>User-agent Header:" + navigator.userAgent + "</p>";
txt += "<p>User-agent language:" + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML = txt;
</script>
</body>
</html>
window-resize-to：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="openWindow()">打开窗口</button>
<button onclick="resizeWindow()">重置窗口大小</button>
<script type="text/javascript">
var w;
function openWindow(){
w = window.open("","","width=300,height=200");
// 获得焦点
w.focus();
}
// resizeTo(参数1，参数2), 重置大小
function resizeWindow(){
w.resizeTo(500,400);
w.focus();
}
</script>
</body>
</html>
window对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 确定浏览器窗口尺寸
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log("innerwidth:" + window.innerWidth);
console.log("innerheight:" + window.innerHeight);
console.log("document.documentElement.clientWidth:" + document.documentElement.clientWidth);
console.log("document.documentElement.clientHeight:" + document.documentElement.clientHeight);
console.log("document.body.clientWidth:" + document.body.clientWidth);
console.log("document.body.clientHeight:" + document.body.clientHeight);
console.log(w);
console.log(h);
</script>
</body>
</html>
window对象-open方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 打开一个窗口，调用window的open方法
function openWin(){
window.open("http://www.baidu.com");
}
</script>
</head>
<body>
<!-- window open方法，打开一个窗口 -->
<input type="button" name="" id="" value="打开空白页" onclick="openWin()" />
</body>
</html>
window移动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="打开窗口" onclick="openWin()"/>
<input type="button" name="" id="" value="移动窗口" onclick="moveWin()"/>
<script type="text/javascript">
function openWin(){
myWindow = window.open("","","width=200,height=100");
myWindow.document.write("这是新打开的窗口");
}
function moveWin(){
// moveTo() 方法可把窗口的左上角移动到一个指定的坐标
myWindow.moveTo(300,200);
// 窗口获得焦点
myWindow.focus();
}
</script>
</body>
</html>
浙公网安备 33010602011771号