JavaScript笔记之操作浏览器窗口

最新推荐文章于 2023-06-13 14:04:06 发布

iteye_13633

最新推荐文章于 2023-06-13 14:04:06 发布

阅读量95

点赞数

文章标签： javascript xhtml ViewUI

窗口是Web浏览器中最重要的界面元素，JavaScript提供了许多操作窗口的工具，JavaScript处理窗口的方式与处理框架很相似（因为框架是位于总浏览器窗口中的文档窗口）。

今天学习了如何使用JavaScript打开关闭，更新和定位窗口，如何使用JavaScript将信息写入窗口，从而可以在运行时构建网页。

(一)打开新窗口

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Open 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">Tired</a></h2> </body> </html>

(二)打开多个窗口

<html xmlns="http://www.w3.org/1999/xhtml"> <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><a href="#" class="newWin">Click here to see him</a></h2> </body> </html>

(三)关闭窗口

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Window Test</title> <script type="text/javascript" src="script03.js"></script> </head> <body bgcolor="#FFFFFF"> <div align="center"> <h1>Let's play with windows!</h1> <h3> <a href="#" id="openWin">Open a new window</a> <a href="#" id="closeWin">Close the window</a> </h3> </div> </body> </html>

(四)把窗口放在指定位置

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Window Test</title> <script type="text/javascript" src="script06.js"></script> </head> <body bgcolor="#FFFFFF"> <div align="center"> <h1>Let's play with windows!</h1> <h3> <a href="#" id="topLeftWin">Move/open window in the top left</a> <a href="#" id="topRightWin">Move/open window in the top right</a><br /> <a href="#" id="bottomLeftWin">Move/open window in the bottom left</a> <a href="#" id="bottomRightWin">Move/open window in the bottom right</a><br /> <a href="#" id="closeWin">Close the window</a> </h3> </div> </body> </html>

以上四种操作所需的js脚本分别为以下scripti：

/** * 打开新窗口(script1.js) */ window.οnlοad=newWinLinks; function newWinLinks(){ for(var i=0;i<document.links.length;i++){ if(document.links[i].className=="newWin"){ document.links[i].οnclick=newWindow; } } } function newWindow(){ var catWindow=window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350,height=260"); //注意在宽度和高度参数中的逗号之间不能有任何空格，如果有空格，那么脚本 //可能在某些浏览器中无效， return false; }

/**
 *打开多个窗口(script2.js) 在每次点击屏幕上的一个控件时，通过创建的脚本代开不同的窗口
 */
window.οnlοad=newWinLinks;

function newWinLinks(){
	for(var i=0;i<document.links.length;i++){
		if(document.links[i].className="newWin"){
			document.links[i].οnclick=newWindows;
		}
	}
}

function newWindows(){
	for(var i=1;i<5;i++){
		var imgName="images/pixel"+i+".jpg";
		var winName="window"+i;
		var catWindow=window.open(imgName, winName,"width=350,height=260");
	}
}

/** * 关闭窗口(script3.js) */ var newWindow=null; window.οnlοad=newWinLinks; function newWinLinks(){ for(var i=0;i<document.links.length;i++){ document.links[i].οnclick=chgWindowState; } } function windowOpen(){ if(newWindow&&!newWindow.closed){ return true; } return false; } function chgWindowState(){ if(this.id=="closeWin"){ if(windowOpen()){ newWindow.close(); }else{ alert("The window isn't open"); } } if(this.id=="openWin"){ if(windowOpen()){ alert("The window is already open!"); }else{ newWindow=window.open("", "newWin","toolbar,location=yes,width=300,height=200"); } } return false; }/** * 把窗口放在指定的位置(script4.js)有时候希望在屏幕上的指定位置打开一个窗口，在这个示例中，用户可以选择在屏幕的四个角之一打开一个小窗口。 */ var newWindow=null; window.οnlοad=newWinLinks; function newWinLinks(){ for(var i=0;i<documeng.links.length;i++){ document.links[i].οnclick=chgWindowState; } } function windowOpen(){ if(newWindow&&!newWindow.closed){ return true; } return false; } function chgWindowState(){ if(this.id=="closeWin"){ if(windowOpen()){ newWindow.close(); }else{ alert("The window isn't open"); } return false; } var topPos=0; var leftPos=0; if(this.id.indexOf("bottom")>-1){ topPos=screen.availHeight-200; } if(this.id.indexOf("Right")>-1){ leftPos=screen.availWidth-300; } if(windowOpen()){ newWindow.moveTo(leftPos,topPos); }else{ newWindow=window.open("","newWin","toolbar,location=yes,width=300,height=200,left="+leftPos+",top="+topPos); } return false; }

opener和parent比较：

window.opener其实是指本窗口的父窗口，比如，parWin.js通过window.open弹出了childWin.jsp,那么在childWin.js里面的window.opener就是指parWin.jsp，所以在childWin.js里面完全可以用window.opener调用任何一个parWin.jsp里面的方法，实现parWin.jsp和childWin.jsp的交互。

window.parent 是iframe页面调用父页面对象，比如一个parWin页面利用iframe或frame调用childWin页面，那么parWin页面所在窗口就是childWin页面的parent。

（源《JavaScript基础教程》）

iteye_13633

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记之操作浏览器窗口

窗口是Web浏览器中最重要的界面元素，JavaScript提供了许多操作窗口的工具，JavaScript处理窗口的方式与处理框架很相似（因为框架是位于总浏览器窗口中的文档窗口）。今天学习了如何使用JavaScript打开关闭，更新和定位窗口，如何使用JavaScript将信息写入窗口，从而可以在运行时构建网页。 (一)打开新窗口&lt;html xmlns="http://www....
复制链接

扫一扫