JavaScript 动态网页实例 —

JavaScript 动态网页实例 —— 窗口控制

news2024/11/18 12:37:54

除了打开和关闭窗口之外,还有很多其他控制窗口的方法。例如,可以使用 window.focus()方法使窗口获得焦点，也可以利用与其相对的window.blur 方法使窗口失去焦点。本节介绍移动窗口、改变窗口大小、窗口滚动、窗口超时操作、常用窗口事件、常用窗口扩展等窗口控制的方法和手段。

窗口移动

本节给出一段窗口移动的示例代码，可以实现移动窗口在屏幕上位置的改变。位置改变时，既可以逐渐位移，也可一步到位。

要点

本节代码主要使用了 window.moveBy()方法和 window.moveTo()方法，二者的主要功能和用法如下。

window.moveBy()方法将窗口移动指定的像素数,其语法格式为“窗口名称.moveBy(水平像素数,垂直像素数)”。其中,“窗口名称”指要移动的窗口的名称。如果只有主窗口，则指该主窗口:“水平像素数”指在水平方向上移动窗口的像素数:如果为正数，则向右移动;如果是负数，则向左移动;“垂直像素数”指在垂直方向上移动窗口的像素数。如果为正数，则向上移动;如果是负数，则向下移动。
如果想将窗口移动到一个确定的位置，更好的办法是使用 window.moveTo()方法。该方法会将窗口移动到屏幕上以平面坐标表示的固定位置。其语法格式为“窗口名称.moveTo(x坐标，y 坐标)”。其中,“窗口名称”指要移动的窗口的名称。如果只有主窗口，则指该主窗口;“x坐标”是要将窗口移动到的屏幕上x轴的坐标数;“y坐标”是要将窗口移动到的屏幕上y轴的坐标数。

<script type="text/javascript">
<!--
var myWindow;
function openIt() //函数：打开
{
//要打开的新窗口的特征
myWindow = open('','mywin','height=300,width=300,scrollbars=yes');
//新窗口页面HTML头部信息
myWindow.document.writeln("<html><head><title>新窗口</title></head>");
//新窗口页面HTML主体信息
myWindow.document.writeln("<body bgcolor='#ffcc00'>");
myWindow.document.writeln("<h1>这里是新窗口</h1><hr>");
myWindow.document.writeln("<h5>用递归求阶乘函数：</h5><pre>");
myWindow.document.writeln("function factorial(aNumber)<br>{");
myWindow.document.writeln("   // 如果这个数不是一个整数，则向下舍入。");
myWindow.document.writeln("   aNumber = Math.floor(aNumber);");
myWindow.document.writeln("   if (aNumber < 0)");
myWindow.document.writeln("   {  // 如果这个数小于 0，拒绝接收。");
myWindow.document.writeln("       return -1;<br>   }");
myWindow.document.writeln("   if (aNumber == 0)");
myWindow.document.writeln("   {  // 如果为 0，则其阶乘为 1。");
myWindow.document.writeln("      return 1;<br>   }");
myWindow.document.writeln("   else<br>      // 否则，递归直至完成。");
myWindow.document.writeln("      return (aNumber * factorial(aNumber - 1));");
myWindow.document.writeln("}</pre></body></html>");
myWindow.document.close();  //关闭输入
myWindow.focus();          //获取焦点
}

function moveIt()  //函数：移动
{
if ((window.myWindow) && (myWindow.closed == false))
myWindow.moveTo(document.testform.moveX.value,
document.testform.moveY.value);
}
//-->
</script>