📄 5.2.5.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">其他窗口操作</h2>
<p>window 对象的其他方法用于进行一些常用的窗口操作，例如设置输入焦点、移动窗口、改变窗口大小等。</p>
<p>
1. 设置输入焦点<p>
使用 window 对象的 blur() 方法可以从当前窗口中移出焦点，使用 focus() 方法可以使当前窗口获得焦点。注意在结合使用这两个方法时要小心，以免造成焦点不断移进移出的循环。
<p> 以下示例显示了 blur() 方法和 focus() 方法的应用。
<p><a href="../src/tu5.18.htm" target="_blank">示例</a>
<p>这段代码的效果为：单击"新窗口按钮"，则新建一个窗口，但焦点仍然保持在原窗口；当单击"切换焦点"按钮时，焦点切换到子窗口。
<p>
<p> 实际上，对应于焦点移进移出窗口还有两个常用事件 onBlur 和 onFocus，在对这两个事件进行处理时也要注意避免造成焦点移进移出的循环。
<p> 以下示例显示了当焦点移进新窗口时，弹出一个欢迎对话框。
<p><a href="../src/tu5.19.htm" target="_blank">示例 </a>
<p>本示例的效果是：当用户单击"新窗口"按钮时，新建一个窗口并在其中显示 newWin.htm 文件，此时新窗口获得焦点，因此触发 onfocus
事件，于是弹出一个欢迎对话框。
<p> 2. 移动窗口
<p>
使用 window 对象的 moveBy() 和 moveTo() 方法可以移动窗口，前者每次移动指定像素，后者移动到指定位置。这两个方法的参数都是两个像素数，对于
moveBy() 方法表示横向和纵向移动的像素数，对于 moveTo() 方法表示移动到的坐标。在使用像素数时，可以使用负数。
<p> 以下示例显示了如何用这两个方法移动窗口。
<p><a href="../src/tu5.20.html" target="_blank">示例</a>
<p>当用户单击"向右下移动"按钮时，每次在横向和纵向都移动 10 个像素；当用户单击"向左上移动"按钮时，每次在横向和纵向都反向移动
10 个像素；当用户单击"移动到 (10,10)"按钮时，窗口移动到屏幕左上角的 (10,10) 坐标处；当用户单击"移动到
(-10,-10)"按钮时，窗口移动到屏幕左上角的 (-10,-10) 坐标处（此时有一部分看不到）。
<p>
注意：在 Internet Exploer 中不支持 onMove 事件。<p>
3. 滚动窗口<p>
使用 window 对象的 scroll()、scrollBy() 和 scrollTo() 方法可以滚动窗口，其中 scroll() 方法和 scrollTo()
方法的效果相同，都是滚动到指定位置，而 scrollBy() 方法则是一次滚动指定像素。同样，这些方法的参数都是两个像素数。
<p> 以下示例显示了如何用这三个方法滚动窗口。
<p><a href="../src/tu5.21.htm" target="_blank">示例 </a>
<p>当用户单击"向右下滚动"按钮时，滚动条每次在横向和纵向都移动 10 个像素。
<p>
<p> 当用户单击"向左上移动"按钮时，滚动条每次在横向和纵向都反向移动 10 个像素；当用户单击"滚动到 (10,10)"按钮时，相当于第一次单击"向右下滚动"按钮；当用户单击"移动到
(-10,-10)"按钮时，没有任何效果。
<p>
根据这个示例可以看出，只有当滚动有意义时，使用这三个方法才能产生特定的效果，否则窗口内容并不按参数指定滚动。例如，如果没有水平滚动条，则 moveBy(10,10)
的效果与 moveBy(0,10) 一模一样；如果既没有水平滚动条，也没有垂直滚动条，则任何方法都不能使窗口内容滚动。<p>
4. 缩放窗口<p>
使用 window 对象的 resizeBy() 和 resizeTo() 方法可以缩放窗口（也就是更改窗口大小），前者每次缩放指定像素，后者缩放到指定大小。这两个方法的参数都是两个像素数，对于
resizeBy() 方法表示横向和纵向缩放的像素数，对于 resizeTo() 方法表示缩放到的宽高。在使用像素数时，可以使用负数。在更改窗口大小时，浏览器会触发
onResize 事件，可以对该事件进行处理。
<p> 以下示例显示了如何缩放窗口以及响应 onResize 事件。
<p><a href="../src/tu5.23.htm" target="_blank">示例</a>
<p>当用户单击"缩小"按钮时，两次弹出"最好别动我"提示框（这是因为横向纵向缩放分别触发了 onresize 事件），然后窗口长和宽都缩小
10 个像素；当用户单击"放大"按钮时，也是两次弹出"最好别动我"提示框，然后窗口长和宽都增大 10 个像素；当用户单击"缩小到
400*300"按钮时，也是两次弹出"最好别动我"提示框，然后窗口缩小到长 400 像素、宽 300 像素。
<p>
<p> 5. 打印窗口内容
<p>
使用 window 对象的 print() 方法，可以使用户打开"打印"对话框，以便打印当前网页。调用该方法相当于使用"文件"菜单中的"打印"命令。
<p> 以下示例显示了 print() 方法的作用。
<p><a href="../src/tu5.25.htm" target="_blank">示例 </a>
<p>这段代码的显示效果当用户单击"打印"按钮时，将弹出"打印"对话框，用户可以设置打印选项。
<p>
<p> </p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -