Download presentation
Presentation is loading. Please wait.
1
第六章 操作浏览器窗口
2
基础知识 打开新窗口的方法window.open 语法 window.open(URL,name,features,replace)
参数描述 URL： 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串， 那么新窗口就不会显示任何文档。 name：一个可选的字符串，该字符串是一个由逗号分隔的特 征列表，其中包括数字、字母和下划线，该字符声明 了新窗口的名称。如果该参数指定了一个已经存在的 窗口，那么 open() 方法就不再创建一个新窗口，而 只是返回对指定窗口的引用。在这种情况下， features 将被忽略。
3
基础知识 features：一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。应用逗号分割每个参数而不是封号。 replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。 features参数列表如下：
4
基础知识 参 数 设定值 含 义 toolbar yes/no 建立或不建立标准工具条 location 建立或不建立位置输入字段
directions 建立或不建立标准目录按钮 status 建立或不建立状态条 menubar 建立或不建立菜单条 scrollbar 建立或不建立滚动条 revisable 能否改变窗口大小 width 确定窗口的宽度 Height 确定窗口的高度。
5
6.1 打开新窗口 <html> <head> <title>Opening a Window</title> <script type="text/javascript" src="script01.js"> </script> </head> <body bgcolor="#FFFFFF"> <h1>The Master of the House</h1> <h2>Click on His name to behold He Who Must Be Adored</h2> <h2><a href="#" class="newWin">Pixel</a></h2> </body> </html>
6
6.1 打开新窗口 window.onload = newWinLinks; function newWinLinks() {
for (var i=0; i<document.links.length; i++){ if (document.links[i].className == "newWin"){ document.links[i].onclick = newWindow; } function newWindow() { var catWindow = window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350,height=260"); return false; 注意：为防止脚本在某些浏览器中无效，“width=350,height=260”两个参数中的逗号之间不能有任何空格。
7
6.2 将不同内容加载进窗口中 focus()方法 focus()方法用于获取焦点位置。使用此方法的窗口将会显示在全前端。 blur()方法
示例见课本脚本6－3
8
6.2 将不同内容加载进窗口中 <head> <title>About that Cat</title> <script type="text/javascript" src="script02.js"></script> </head> <body bgcolor="#FFFFFF"> <h1>More pictures of our cat</h1> <h2>Click on the description to see his mood</h2> <p><a href="images/pixel2.jpg“ class="newWin">Tired</a> </p> <p><a href="images/pixel3.jpg“ class="newWin">Exhausted</a> <p><a href="images/pixel4.jpg“ class="newWin">Sleepy</a> </body> </html>
9
6.2 将不同内容加载进窗口中 window.onload = newWinLinks; function newWinLinks() {
script02.js如下： window.onload = newWinLinks; function newWinLinks() { for (var i=0; i<document.links.length; i++){ if (document.links[i].className == "newWin"){ document.links[i].onclick = newWindow; } function newWindow() { var catWindow = window.open(this.href,"catWin","width=350,height=260"); catWindow.focus(); // 弹出的页面始终显示最前端 return false;
10
6.3 打开多个窗口 实现思想：只有window.open()方法中第二个参数（窗口名称参数）是唯一的，即只要每个窗口名称不一样就会打开新窗口。 如果用户希望每次点击链接时都打开一个新窗口（而不是刷新现有的窗口），那么只需在窗口名称中添加一个随机数。
11
6.3 打开多个窗口 window.onload = newWinLinks; function newWinLinks() { for (var i=0; i<document.links.length; i++) { if (document.links[i].className == "newWin") { document.links[i].onclick = newWindows; } } function newWindows() { //循环调用window.open()方法以打开不同窗口 for (var i=1; i<5;i++) { var imgName = "images/pixel" + i + ".jpg"; var winName = “window” + i; //使用i以产生不同窗口名称 var catWindow = window.open(imgName,winName,"width=350,height=260"); return false;
12
6.4 从一个窗口更新另一个窗口 为实现不同窗口之间的简单交互，将一个窗口中输入的信息发送到另一个窗口中去显示。
以下示例将使用两个窗口：主窗口是父窗口，它将接收和显示在子窗口中输入的信息。
13
6.4 从一个窗口更新另一个窗口 父窗口HTML <html> <head>
<title>Big Window</title> <script type="text/javascript" src="script04.js"></script> </head> <body bgcolor="#FFFFFF"> <div align="center"> <h1>Welcome to this page!</h1> <form action="#"> <input type="text" size="20" id="msgLine“ readonly="readonly" /> </form> </div> </body> </html>
14
6.4 从一个窗口更新另一个窗口 子窗口HTML <html> <head>
<title>Little Window</title> <script type="text/javascript" src="script04.js"></script> </head> <body bgcolor="#FFFFFF"> <h1>What's your name?</h1> <form action="#"> <input type="text" id="childField" size="20" /> </form> </body> </html>
15
6.4 从一个窗口更新另一个窗口 window.onload = initWindows; function initWindows() { if (document.getElementById("childField")) { document.getElementById("childField").onchange = updateParent; } else { newWindow = window.open("child.html","newWin","status=yes,width=300,height=300"); function updateParent() { opener.document.getElementById("msgLine").value = "Hello " + this.value + "!"; Opener属性使JavaScript可以向后引用打开子窗口的父文档。
16
6.5 关闭窗口 可以使用window对象的close()方法来关闭窗口。 示例见课本脚本6－8，6－9
17
6.6 把窗口放在指定的位置 window.moveto()调整浏览器位置 window.moveTo(10, 20);
将浏览器的位置定位到X:10 Y:20 Window.resizeTo() window.resizeTo(800, 600); 将浏览器调整到800X600大小 在此示例中用户可以选择在屏幕的四个角之一打开一个小窗口 示例见课本脚本6－10，6－11
Similar presentations
