- window常用方法2
-
- window属性
1. 方法
1) window.moveTo(x,y)
① 功能
可把窗口的左上角移动到一个指定的坐标。
② 示例(注: 仅IE通过)
<body>
<input type="button" value="moveTo()" onclick="toNewPosition()"/>
</body>
<script type="text/javascript">
function toNewPosition() {
window.moveTo(300, 300);
}
</script>
2) window.moveBy(x,y)
① 功能
可相对窗口的当前坐标把它移动指定的像素。
② 示例(仿 QQ 窗口抖动, IE可通过)
<body>
<input type="button" value="start" onclick="remind()"/>
<input type="button" value="stop" onclick="stop()"/>
</body>
<script type="text/javascript">
var interval_id;
// 仿 QQ 窗口抖动
function remind() {
interval_id = window.setInterval(move, 200);
}
function stop() {
window.clearInterval(interval_id);
}
function move() {
window.moveBy(20, 0);
window.moveBy(0, 20);
window.moveBy(-20, 0);
window.moveBy(0, -20);
}
</script>
3) resizeTo()
resizeBy()
① 原窗口的 宽=200px 高=300px
resizeTo(100, 100)
现窗口的 宽=100px 高=100px
② 原窗口的 宽=200px 高=300px
resizeBy(100, 100)
现窗口的 宽=200px+100px 高=300px+100px
4) open(url[, name][, features][, replace])
/ close()
① 功能
打开一个新的浏览器窗口或查找一个已命名的窗口
返回 该窗口window对象的引用
② 示例
<body>
<input type="button" value="openNewWindow_1" onclick="openNewWindow_1()"/>
<input type="button" value="openNewWindow_2" onclick="openNewWindow_2()"/>
</body>
<script type="text/javascript">
function openNewWindow_1() {
window.open("http://www.baidu.com", "_blank");
// <==> window.open("http://www.baidu.com");
}
function openNewWindow_2() {
window.open("http://www.baidu.com", "_blank",
"height=500, width=600px, " + // 宽 高
"directories=no, " + // 目录按钮
"location=no, " + // 显示地址字段
"menubar=no, " + // 显示菜单栏
"resizable=no, " + // 可调节尺寸
"titlebar=no"
);
}
</script>
2. 属性
1) document
获取window的document对象 的引用.
注: window对象可以获得所有 BOM对象的引用.
2) opener
① 功能
返回对创建该窗口的 Window 对象的引用
② 示例-两页面传值
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-9" />
<script type="text/javascript">
function openNewWindow() {
var newWindow = window.open("childWindow.html", "_blank");
// 给新窗口中的文本框赋初值
newWindow.onload = function() {
this.document.getElementById("username").value = "123";
}
}
</script>
</head>
<body>
<input type="button" value="openNewWindow" onclick="openNewWindow()"/>
<div id="demoDiv">...</div>
</body>
</html>
childWindow.html
<script type="text/javascript">
var parentWindow = window.opener;
var parentWindowDocument = parentWindow.document;
var parentWindowDiv = parentWindowDocument.getElementById("demoDiv");
// 将username放入 父窗口中的div
function notify() {
var username = document.getElementById("username").value;
// parentWindowDiv.innerText = username; // FireFox不支持 innerText
parentWindowDiv.innerHTML = username;
}
</script>
<input type="text" id="username">
<input type="button" value="submit" onclick="notify()">
3. 示例
1) 登陆成功5秒后跳转到主页面
login.html -> success.html -> manage.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function validateInfo() {
var username = $("username").value;
var password = $("password").value;
if (username == "admin" && password == "123") {
return true;
}
return false;
}
</script>
</head>
<body>
<form action="success.html">
usrename: <input type="text" id="username"><br/>
password: <input type="text" id="password"><br/>
<input type="submit" value="submit" onclick="return validateInfo()">
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
var msg;
var count = 5;
window.onload = function() {
msg = $("msg");
window.setInterval(timeCount, 1000);
}
function $(id) {
return document.getElementById(id);
}
function timeCount() {
msg.innerHTML = --count;
if (0 == count) {
window.open("manage.html", "_self");
}
}
</script>
</head>
<body>
success!!!!!!!! <span id="msg">5</span> 秒后跳转的管理页面
</body>
</html>
<body>
<h3>manage page````````````````</h3>
</body>