JavaScript笔记之操作浏览器窗口

标签： javascript 笔记 浏览器 | 发表时间：2012-03-21 07:13 | 作者：yanghai0321
出处：http://blog.csdn.net

        窗口是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.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;
}
  
/**
 *打开多个窗口(script2.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=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.onload=newWinLinks;

function newWinLinks(){
	for(var i=0;i<document.links.length;i++){
		document.links[i].onclick=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.onload=newWinLinks;

function newWinLinks(){
	for(var i=0;i<documeng.links.length;i++){
		document.links[i].onclick=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基础教程》）

  


          

            作者：yanghai0321 发表于2012-3-21 7:13:41    原文链接
        

          

            阅读：19 评论：0    查看评论
        

        

相关 [javascript 笔记 浏览器] 推荐：
JavaScript笔记之操作浏览器窗口

-  - CSDN博客推荐文章

        窗口是Web浏览器中最重要的界面元素，JavaScript提供了许多操作窗口的工具，JavaScript处理窗口的方式与处理框架很相似（因为框架是位于总浏览器窗口中的文档窗口）.       今天学习了如何使用JavaScript打开关闭，更新和定位窗口，如何使用JavaScript将信息写入窗口，从而可以在运行时构建网页. 
Javascript和CSS浏览器兼容总结

- Keel - ITeye资讯频道

这篇文章重点总结了Javascript和CSS浏览器兼容性问题. document.form.item 问题. 代码中存在 document.formName.item(“itemName”). 这样的语句，不能在FIREFOX下运行. 改用 document.formName.elements["elementName"]. 
javascript兼容多种浏览器

-  - JavaScript - Web前端 - ITeye博客

随着以Firefox为代表的第三方浏览器的兴起，我们做的网站也不能再JUST IE了，如果把原来的一些Javascript代码放到IE以外的浏览器的话，往往都不能正常运行或出错，所以这里介绍一下怎么改进我们的JS，让它能更加规范，更加具有兼容性.        不吃苹果  . 
PouchDB：一个JavaScript与HTML5实现的浏览器端CouchDB

- Vingel - NoSQLFan

CouchDB的一大特点是利用其同步机制在终端与服务端进行数据同步，比如在移动终端Android系统和iOS系统下都有CouchDB的实现，其策略是离线时将数据存在本地，在线后将数据与服务端进行同步. 而今天要说的是利用JavaScript和HTML5的IndexedDatabase实现的一个完全兼容CouchDB同步协议的家伙：PouchDB. 
现代浏览器的web音频javascript类库 - Howler.js

-  - CSDN博客Web前端推荐文章

日期：2013-2-6  来源：  GBin1.com. 浏览器这个玩意儿并不是个新鲜事，但是随着HTML5的发展激起了浏览器技术的巨大发展. 但是浏览器上对于音频控制技术来说仍旧非常的落伍. 庆幸的是 Google积极的开发和创建了web audio API，这使得基于浏览器的音频控制更加的简单并且直观. 
Conditioniz – 探测浏览器并条件加载 JavaScript 和 CSS

-  - 博客园_梦想天空

　　Conditioniz 是一个快速、轻量级（3KB）的 JavaScript 工具，用于探测浏览器和分辨率并条件加载 JavaScript 和 CSS 文件. Conditioniz 从它的 jQuery 前身重建，现在速度要快50%. 结合类名添加和 Conditionizr 集成的脚本和样式加载功能，允许你为不同的浏览器指定想加载的脚本和样式. 
JAVASCRIPT 浏览器兼容性问题及解决方案列表

-  - ITeye博客

原文链接   http://www.javaarch.net/jiagoushi/611.htm. 如果需要传递参数，可以使用frame或者iframe. 兼容所有：
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行. 此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误. 
JavaScript单线程和浏览器事件循环简述

-  - 破狼 Blog

JavaScript单线程. 在上篇博客  《Promise的前世今生和妙用技巧》的开篇中，我们曾简述了JavaScript的单线程机制和浏览器的事件模型. 应很多网友的回复，在这篇文章中将继续展开这一个话题. 当然这里是博主的一些理解，如果还存在什么纰漏的话，请不吝指教. JavaScript这门语言运行在浏览器中，是以单线程的方式运行的. 
javaScript跨浏览器事件处理程序

-  - SegmentFault 最新的文章

最近在阅读  javascript高级程序设计，事件这一块还是有很多东西要学的，就把一些思考和总结记录下. 在事件处理，事件对象，阻止事件的传播等方法或对象存在着浏览器兼容性问题，开发过程中最好编写成一个通用的事件处理工具. //在这里添加一些通用的事件处理方法. 事件的绑定主要为IE8以下浏览器做兼容处理：.