您的位置：首页 > Web前端 > JavaScript

韩顺平 javascript教学视频_学习笔记26_dom对象（window对象2）

2016-02-23 15:47 816 查看

dom对象详解----window对象2

moveTo() 和 moveBy()方法
moveTo() 方法可把窗口的左上角移动到一个指定的坐标。

moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。

<html>
<head>
<script type="text/javascript">
function moveWin()
{
window.moveTo(400,400);
}
window.moveTo(400,400);
window.moveBy(400,400);
</script>
</head>
<body>

<input type="button" value="移动" onclick="moveWin()" />

</body>
</html>

resizeTo() 和 resizeBy() 方法

window.resizeTo(400,400); //把窗口大小调整到400,400
window.resizeBy(400,400); //把窗口在原来的基础上再增加400,400

<html>
<head>
<script type="text/javascript">
function test()
{
window.resizeTo(400,400);
window.resizeBy(400,400);
}

</script>
</head>
<body>

<input type="button" value="改变大小" onclick="test()" />

</body>
</html>

open() 和 close()

opener

opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。
opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。

注释：只有表示顶层窗口的 Window 对象的 operner 属性才有效，表示框架的 Window 对象的 operner 属性无效。

注意：在IE浏览器中可以使用innerText，但是在火狐浏览器中不能使用，需使用textContent

父窗口和子窗口通信

父窗口程序：

<html>
<head>
<script type="text/javascript">

var newWin;
function test()
{
//newWin其实就是指向新窗口的引用
newWin = window.open("NewWin.html","_blank");

}

function notifyChild(){
var val=document.getElementById("Father_info").value;
newWin.document.getElementById("span2").innerText=val;// IE 浏览器
newWin.document.getElementById("span2").textContent=val; // 火狐浏览器
}

</script>

</head>
<body>
我是父窗口<br/>
<input type="button" value="打开子窗口" onclick="test()" /><br/>
<span id="myspan">父窗口消息</span><br/>
<input type="text" id="Father_info"/><br/>
<input type="button" value="在子窗口显示" onclick="notifyChild()"/><br/>
</body>
</html>

子窗口程序：

<html>
<h
4000
ead>
<script language="javascript">

function notify(){
var val=document.getElementById("Child_info").value;
opener.document.getElementById("myspan").innerText=val;
}
</script>
</head>
<body>
我是子窗口<br/>
<input type="text" id="Child_info"/><br/>
<input type="button" value="在父窗口显示" onclick="notify()"/><br/>
<span id="span2">子窗口信息</span>
</body>
</html>

再来看1个案例：

<html>
<head>
<script type="text/javascript">
function checkuser(){

if($('uname').value=="shunping" && $('pwd').value=="123"){
//window.alert("ok");
return true;
}else {
//window.alert("no ok");
$('uname').value="";
$('pwd').value="";
return false;
}

}

function $(id){

return document.getElementById(id);
}
</script>

</head>
<body>
<form action="OK.html">
用户名：<input type="text" id="uname"/><br/>
密码：<input type="password" id="pwd"/><br/>
<input type="submit" value="登录" onclick="return checkuser()">
</body>
</html>

OK.html

<html>
<head>
<script type="text/javascript">

function tiao(){
clearInterval(mytime);
window.open('manage.html');
}

setTimeout("tiao()",5000);

function changeSec(){

$("myspan").innerText=$("myspan").innerText-1;
}

var mytime=setInterval("changeSec()",1000);

function $(id){

return document.getElementById(id);
}
</script>

</head>
<body>
登录成功<br/>
<span id="myspan">5</span>
秒后跳转到管理页面
</body>
</html>

manage.html

<html>
<head>
<script type="text/javascript">

</script>

</head>
<body>
管理页面
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 学习视频 javascript 韩顺平学习笔记

相关文章推荐

新的分享

章节导航