Home思洋影视事业部网站建设知识库
0 Comments

控制IE的弹出页面

发布于：2012-11-17  |   作者：广州网站建设  |   已聚集：人围观
控制IE的弹出页面    广州网站设计

最基本的弹出窗口是通过window.open()方法来实现的。读者对下面这段代码应该不陌生，执行该方法将会在浏览器中打开一个新的index.html页面。



    
	
  1. 
		<script LANGUAGE="javascript">   
    2. 
	
  2. 
		window.open （'index.html'）   
    3. 
	
  3. 
		</script> 
    4. 




	 



	1.3.1节提到过JavaScript代码在HTML中的嵌入形式，所以应该放在<script LANGUAGE ="javascript">标记和</script>之间。window.open（'index.html'）的作用是打开一个新窗口，并装载URL指定的文档，如果没指定URL将会装载一个空白文档。  广州网站设计



	注意：如果载入的文件与主窗口不在同一路径下，前面应写明路径，绝对路径（http://）或相对路径（../）均可，可以用单引号也可以用双引号，只是要注意符号统一。



	1．通过改变window.open()的参数来弹出窗口



	通过改变window.open()函数中的参数，可以对弹出窗口的外观进行具体的设置，例如：弹出窗口的外观、尺寸大小、弹出位置等。  广州网站设计




    
	
  1. 
		<script LANGUAGE="javascript">   
    2. 
	
  2. 
		<!--  
    3. 
	
  3. 
		window.open('index.html','newwindow','height=100, width=400,top=0,left=0,toolbar=no,menubar=no, scrollbars=no, resizable=no,location=no,status=no')   
    4. 
	
  4. 
		//注意写在一行  
    5. 
	
  5. 
		-->   
    6. 
	
  6. 
		</script> 
    7. 




	 



	【参数解释】  广州网站建设



	<script LANGUAGE="java script">：JavaScript开始标记。



	window.open：弹出新窗口的命令。



	page.html：弹出新窗口的文件名。



	newwindow：弹出窗口的名字（不是文件名），可用空""代替。



	height=100：窗口高度。



	top=0：窗口距离屏幕上方的像素值。



	left=0：窗口距离屏幕左侧的像素值。



	toolbar=no：是否显示工具栏，yes为显示。



	menubar,scrollbars：表示菜单栏和滚动栏。



	resizable=no：是否允许改变窗口大小，yes为允许。



	location=no：是否显示地址栏，yes为允许。



	status=no：是否显示状态栏内的信息（通常是文件已经打开），yes为允许。



	</script>：JavaScript结束标记。   广州网站建设



	2．通过封装函数调用的方式来控制弹出窗口



	除了直接在HTML代码中插入JavaScript脚本外，还可以通过封装函数调用的方式来控制弹出窗口，下面是一段完整的应用。




    
	
  1. 
		<html>   
    2. 
	
  2. 
		<head>   
    3. 
	
  3. 
		<script LANGUAGE="javascript">   
    4. 
	
  4. 
		<!--   
    5. 
	
  5. 
		function openwin (){   
    6. 
	
  6. 
		window.open("index.html","newwindow","height=100,width=400,toolbar=no,  
    7. 
	
  7. 
		menubar=no,scrollbars=no, resizable=no,location=no,status=no";)  
    8. 
	
  8. 
		//注意折行问题  
    9. 
	
  9. 
		}  
    10. 
	
  10. 
		--> 
    11. 
	
  11. 
		</script> 
    12. 
	
  12. 
		</head> 
    13. 
	
  13. 
		<body onload="opennew ()"> 
    14. 
	
  14. 
		<!-- HTML页面内容 --> 
    15. 
	
  15. 
		</body>   
    16. 
	
  16. 
		</html>   
    17. 




	【代码解读】    广州网站建设



	以上代码将打开一个新的弹出窗口，将业务逻辑代码进行函数封装，并命名为opennew()。需要注意的是，封装的函数在没有被调用之前是不会被执行的，这样在实际的应用中，就可以根据不同的需求选择不同的调用方式。最常用的方法有以下几种。



	直接加载：<body onload="opennew ()">即直接加载方式，当浏览器执行到该行代码后调用弹出窗口函数。



	离开调用：<body onunload="opennew ()"> 即当浏览器离开本次浏览的页面时调用弹出窗口函数。



	伪链接调用：<a href="#" onclick=" opennew ()">被打开文件名</a>即通过onclick单击事件来调用弹出窗口函数。



	注意：使用的"#"符号代表空链接。



	按钮调用：<input type="button" onclick="opennew ()" value="打开窗口">同链接调用的原理相同，即通过onclick点击事件来调用弹出窗口函数。



	下面通过一个完整的例子，展示用以上4种方法调用弹出窗口。实例在浏览器中的执行效果如图1.2所示，调用后的效果如图1.3所示。  广州网站建设




    
	
  1. 
		<html>    
    2. 
	
  2. 
		  <head> 
    3. 
	
  3. 
		  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    4. 
	
  4. 
		  <title>弹出窗口页面设置例子</title> 
    5. 
	
  5. 
		  <script LANGUAGE="Javascript"> 
    6. 
	
  6. 
		  function newopen() {   
    7. 
	
  7. 
		  var newopen ;  
    8. 
	
  8. 
		  newopen=window.open ("index.html", "newwindow", "height=400, width=400,   
    9. 
	
  9. 
		  toolbar =no,  menubar=no, scrollbars=no, resizable=no, location=no,   
    10. 
	
  10. 
		  status=no")                                       //写成一行  
    11. 
	
  11. 
		  newopen.document.write("<TITLE>弹出窗口页面设置例子</TITLE>")  
    12. 
	
  12. 
		  newopen.document.write("<BODY BGCOLOR=#FFFFFF>")  
    13. 
	
  13. 
		  newopen.document.write("<H1>Hello!</h1>")  
    14. 
	
  14. 
		  newopen.document.write("New window opened!")  
    15. 
	
  15. 
		  newopen.document.write("</BODY >")  
    16. 
	
  16. 
		  newopen.document.write("</HTML>")  
    17. 
	
  17. 
		  newopen.document.close()  
    18. 
	
  18. 
		  }   
    19. 
	
  19. 
		</script> 
    20. 
	
  20. 
		  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    21. 
	
  21. 
		  </head> 
    22. 
	
  22. 
		  <!--注释1<body onload="newopen()">--> 
    23. 
	
  23. 
		  <!--注释2<body onunload="newopen()">--> 
    24. 
	
  24. 
		  <body> 
    25. 
	
  25. 
		  1.直接加载方式->在代码中去掉注释1<br/> 
    26. 
	
  26. 
		  2.离开加载方式->在代码中去掉注释2<br/> 
    27. 
	
  27. 
		  3.链接触发调用-><a href="#" onClick="newopen()">链接方式打开</a><br/> 
    28. 
	
  28. 
		  4.按钮触发调用-><input type="button" onClick="newopen()" value="按钮调用"> 
    29. 
	
  29. 
		  </body> 
    30. 
	
  30. 
		</html> 
    31. 




	 

代码在浏览器中的执行效果如图1.2所示。调用后的效果如图1.3所示。    


	
		

			
				
		

		

			
				图1.2  弹出窗口预览
		

	




	
		

			
				
		

		

			
				图1.3  调用弹出页面
		

	



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机