1.开启一个新的窗口?
使用window.open("网址","_blank");
或者window.open("网址");默认开启一个新的窗口
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>无标题文档</title> 7 8 <script type="text/javascript"> 9 10 function openBaidu(){//开启一个新的百度窗口 11 12 //新窗口称为子窗口 13 //老窗口称为父窗口 14 15 //window.open("http://www.baidu.com","_blank"); 16 window.open("http://www.baidu.com");//默认开启一个新的窗口 17 18 } 19 20 </script> 21 22 </head> 23 24 <body> 25 <input type="button" value="百度" onclick="openBaidu()"> 26 </body> 27 </html>
2.开启一个新窗口,并且在新窗口中获取父窗口的元素?
(1)首先在js中全局变量,全局函数都是window对象的属性,只是window.可以省略而已;
(2)开启一个新窗口使用window.open("网址");
(3)获取父窗口中的元素首先使用window.opener属性获取父窗口;然后用父窗口调用父窗口中元素;
注意:window.opener属性在谷歌chrome浏览器中不支持;
父窗口:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>父窗口</title> 7 8 <script type="text/javascript"> 9 10 //全局变量 11 var ename="Simth"; 12 alert("ename:"+window.ename); 13 14 //在js中全局变量,全局函数都是window对象属性,只是window.是可以省略的 15 16 //全局函数 17 function sayHello(){ 18 19 alert("hello"); 20 21 } 22 23 //调用后全局函数 24 window.sayHello(); 25 26 27 </script> 28 29 </head> 30 31 <body> 32 33 <input type="button" value="打开子窗口" onclick="window.open('子窗口.htm')"/> 34 35 </body> 36 </html
子窗口:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>子窗口</title> 7 8 <script type="text/javascript"> 9 10 function getParentEname(){//获取父窗口中的ename 11 12 var parentWindow=window.opener;//获取父窗口 13 var ename=parentWindow.ename;//获取父窗口中ename 14 alert(ename); 15 16 //注意:谷歌chrome浏览器无法使用window.opener获取父窗口; 17 18 } 19 20 21 </script> 22 23 </head> 24 25 <body> 26 27 <input type="button" value="获取父窗口中的ename" onclick="getParentEname()"/> 28 29 </body> 30 </html>