您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript学习笔记-BOM
发布时间：2018-04-05 18:02:18编辑：雪饮阅读（）
调出系统打印机
print();
查找(相当于在记事本中按ctrl+f)
在火狐中有效
find();
打开一个窗口
//打开一个空白窗口
// open();
//打开一个窗口(指定打开链接)
//open('http://www.baidu.com');
//给打开的窗口起一个名字，若不起名字则每执行一次就打开一个新窗口，起名字后由于名字不可重复所以永远之后打开一个窗口，后续执行只会刷新之前打开的窗口
//open('http://www.baidu.com','雪饮');
//指定打开目标(若没有第二个参数，默认_blank)
/*
_blank:新建窗口中打开
_parent:在当前窗口中打开
*/
//open('http://www.baidu.com','_parent');
//使用特定字符串对打开窗口进行各种配置
open('http://www.baidu.com','雪饮','with=400,height=300,top=100,left=100');
Open返回的是子窗口对象
var box=open('http://www.baidu.com','雪饮','with=400,height=300,top=100,left=100');
box.alert('雪饮大侠');
子窗口操作父窗口(火狐有效)
父级窗口html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="zck">子窗口未打开</div>
<script type="text/javascript">
var box=open('cs2.html','雪饮','with=400,height=300,top=100,left=100');
box.alert('雪饮大侠');
</script>
</body>
</html>
子窗口html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.opener.document.getElementById('zck').innerHTML='子窗口已打开';
</script>
</head>
<body>
<p>我是子窗口</p>
</body>
</html>
窗口相对于屏幕左边和上面的位置(火狐不支持)
alert(screenLeft);
alert(screenTop);
窗口相对于屏幕左边和上面的位置
alert(screenX);
alert(screenY);
获取窗口的视口尺寸
alert(innerWidth);
alert(innerHeight);
获取窗口的视口尺寸+边框
alert(outerWidth);
alert(outerHeight);
获取文档尺寸
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
在ie6中这些属性必须在标准模式中使用
获取模式类型
alert(document.compatMode);
如果模式值为CSS1Compat则是标准模式，在ie6中如果模式不是该值就是怪异模式
获取文档尺寸(兼容ie6的怪异模式)
alert(document.body.clientWidth);
alert(document.body.clientHeight);
移动浏览器窗口到指定坐标(ie独有)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function yidong(){
moveTo(100,100);
}
</script>
<title>Title</title>
</head>
<body>
<button onclick="yidong()">移动浏览器到指定位置</button>
</body>
</html>
浏览器窗口横纵坐标分别增加某个长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function yidong(){
moveBy(100,100);
}
</script>
<title>Title</title>
</head>
<body>
<button onclick="yidong()">向下移动100个单位长度，向右移动100个单位长度</button>
</body>
</html>
调整浏览器尺寸到指定尺寸(ie独有)
resizeTo(300,300);
浏览器宽和高增加增加某个单位长度(ie独有)
resizeBy(300,300);
setTimeout函数返回的是一个超时调用的id
var box=setTimeout(function(){alert('拳皇阿里');},5000);
alert(box);
要取消尚未执行的超时调用计划，可以调用 clearTimeout()方法并将相应的超时调用 ID 作为参数传递给它。
间歇调用函数setInterval返回的也是一个id，该函数也可以通过clearTimeout()使用其id在尚未执行前停止。
获取当前页面url
alert(window.location);
//等效
alert(window.document.location);
获取当前页面url中的锚点值
例如地址为http://localhost:63342/untitled/cs.html?_ijt=mijksi0sa4j96f78sgc1cu5leq#12，则获取的锚点值为#12
alert(location.hash);
设置当前页面url中的锚点值(页面打开后自动以新的地址打开)
location.hash='#66';
获取当前页面url中的端口值
alert(location.port);
设置当前页面url中的端口值(页面打开后自动以新的地址打开)
location.port=8888;
获取当前页面url问号后面的字符串
alert(location.search);
设置当前页面url问号后面的字符串(页面打开后自动以新的地址打开)
location.search='?id=5';
ie独有的url跳转方法
location.assign='http://www.baidu.com';
//等效
location.replace='http://www.baidu.com';
强制重新加载页面(直接从服务器端加载，无缓存)
location.reload(true);
不产生历史记录的跳转(ie无效)
location.replace('http://www.baidu.com');
获取浏览器历史记录个数
alert(history.length);
浏览器历史记录的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function back(){history.back();}
function forward(){history.forward();}
function gogo(num){history.go(num);}
</script>
<title>Title</title>
</head>
<body>
<button onclick="back()">后退</button>
<button onclick="forward()">前进</button>
<button onclick="gogo(-2)">后退2页</button>
<button onclick="gogo(2)">前进2页</button>
</body>
</html>
关键字词：javascript,bom