UDN-企业互联网技术人气社区

板块导航

浏览  : 871
回复  : 5

[实例] JavaScript经典实例 笔记5(打开新窗口)

[复制链接]
山外青山的头像 楼主
发表于 2015-8-9 09:59:09 | 显示全部楼层 |阅读模式
window 对象的 open() 方法打开一个新的窗口,
该方法有3 个参数:
第一个参数是要加载的URL;
第二个是为新窗口分配的名字,是用于HTML标记中作为target属性使用。例如如果将新窗口的第二个参数设置为mywindow ,并在原窗口的页面上设置一个超连接<a  href = "test3.html"  target=mywindow> ,点击超链接时,超链接将打开新的子窗口;
第三个参数是可以用来指定新窗口的width 和 height 属性。
  1. var newWindow;
  2. newWindow = window.open("test.html", "mywindow", "width=200 height=200");
复制代码
点击图片出现子窗口:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7. var newWindow;
  8. function details(winURL){
  9. /*这里新打开的窗口均为mywindow ,则点击第二个图片时,仍旧在原来的子窗口,而不是同时打开两个*/
  10. &nbsp;newWindow = window.open(winURL,"mywindow","width=220,height=200");
  11. /*打开的新窗口在原来窗口前面*/
  12. newWindow.focus();
  13. return false;
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <h2>ONLINE BOOK HUYER</h2>
  19. Click any of the images below for more details
  20. <p><strong>Professional Active Server Pages .Net </strong></p>
  21. <img src="1.gif" onclick="details('a.html')"/>
  22. <p><strong>Beginning Dreamweaver MX 2004 </strong></p>
  23. <img src="1.gif" onclick="details('b.html')"/>
  24. </body>
  25. &nbsp;
复制代码
在新窗口中添加HTML
第一个参数是空字符:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7. function details(winURL){
  8. var newWindow = window.open("", "my", "width=120,height=120");
  9. /*打开document对象以接受HTML输入*/
  10. newWindow.document.open();
  11. /*用document.write的方法写入*/
  12. newWindow.document.write("<p>hello</p>");
  13. newWindow.document.write("<p>welcom to here</p>");
  14. /*关闭文档输入,若再用document.write写,会替换掉原来的HTML*/
  15. newWindow.document.close();
  16. /*再写入,只有new html 了*/
  17. newWindow.document.write("<p>new HTML</p>");
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <input type="button"  value="click" onclick="details()"/>
  23. </body>
  24. </html>
复制代码
源窗口与新窗口数据互传
源页面:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <script type="text/javascript">
  8. var windows;//这里 windows 必须是全局变量,否则change()函数不可以使用

  9. function newWindow(){
  10. windows= window.open("new.html", "new", "width=200,height=200");
  11. /*将子窗口位置移动到距左边200像素,上边200像素*/
  12. windows.moveTo(400, 200)
  13. }

  14. function change(){
  15.         /*获取新窗口的表单值*/
  16.          document.form1.text1.value=windows.document.form1.text1.value;         
  17. }
  18. </script>
  19. <body>

  20. </body>
  21. <form name="form1">
  22. <input type="button" value="newWindow" onclick="newWindow()"><br>
  23. <input type="text" name="text1" value="">
  24. <input type="button" value="change" onclick="change()">
  25. </form>
  26. </html>
复制代码
新页面,即作为原页面子窗口的页面new.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <script type="text/javascript">
  8. var windows;//这里 windows 必须是全局变量,否则change()函数不可以使用

  9. function newWindow(){

  10. windows= window.open("new.html", "new", "width=200,height=200");        
  11. }

  12. function change(){
  13.         /*获取新窗口的表单值*/
  14.          document.form1.text1.value=windows.document.form1.text1.value;         
  15. }
  16. </script>
  17. <body>

  18. </body>
  19. <form name="form1">
  20. <input type="button" value="newWindow" onclick="newWindow()"><br>
  21. <input type="text" name="text1" value="">
  22. <input type="button" value="change" onclick="change()">
  23. </form>
  24. </html>
复制代码
一个可以简单的添加删除数目的网页:

主窗口:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>

  6. <script type="text/javascript">
  7. /*添加删除的函数都是在源窗口的代码中实现的,在子页面跳转函数只需要通过 window.opener 引用源窗口即可*/
  8. /*定义数组,书的名称以及价格,是否被添加的标识符*/
  9. var myarray = new Array();
  10. /*注意一维数组要变成二维数组必须要重新 new 一次*/
  11. myarray[101] = new Array();
  12. myarray[201] = new Array();

  13. myarray[101][0]="Professional Active Server Pages .Net ";
  14. myarray[101][1]="$35";
  15. myarray[101][2]=0;

  16. myarray[201][0]="Beginning Dreamweaver MX 2004 ";
  17. myarray[201][1]="$35";
  18. myarray[201][2]=0;

  19. /*点击某本书,弹出书的详细信息以及是否添加到购物车*/
  20. var newWindow;
  21. function details(winURL){
  22. newWindow = window.open(winURL,"mywindow","width=220,height=200");
  23. newWindow.focus();
  24. return false;
  25. }

  26. /*点击查询购物车,新建窗口,写入所添加的书目*/
  27. var allwindow;
  28. function allw(){
  29.         allwindow = window.open("c.html", "allwindow","width=220,height=200");
  30.         allwindow.document.open();
  31.         allwindow.document.write("<h4>"+"Your shopping basket contains :"+"</h4>"+"<br>");        
  32.         /*basketItems 未赋值,是undefined啊,?*/
  33.         var basketItems;
  34.         /*检查购物车内有没有书的标识符*/
  35.         var contains=false;
  36.         for (basketItems in myarray ){
  37.                 /*数组中的标志符,因为addBook() 中设置某书的标识符为1 */
  38.                 if(myarray[basketItems][2]>0){
  39.                         
  40.                         allwindow.document.write(myarray[basketItems][0] + "at" +myarray[basketItems][1]);
  41.                         allwindow.document.write("&nbsp;&nbsp;");
  42.                         allwindow.document.write("<input  type='button'"+" onclick='" + "window.opener.removeBook(" + basketItems + ")'"+"value='删除'"+" >");
  43.                     /*购物车内有书,则设置标识符为true*/
  44.                         contains=true;                }               
  45.         }        
  46.         /*没有书*/
  47.         if(contains==false){
  48.                 allwindow.document.write("<strong>you have not choose books</strong>");
  49.                 }
  50.         allwindow.document.close();
  51. }

  52. /*添加书,添加成功后将书的detail页面关闭*/
  53. function addBook(num){
  54.         myarray[num][2]=1;
  55.         alert("添加成功");
  56.         newWindow.close();
  57. }

  58. /*删除书*/
  59. function removeBook(num){
  60.         myarray[num][2]=0;
  61.         alert("删除成功");
  62.         allwindow.close();
  63. }
  64. </script>
  65. </head>
  66. <body>
  67. <h2>ONLINE BOOK HUYER</h2>
  68. <input type="button" onclick="allw()" value="查询购物车"><br>
  69. Click any of the images below for more details
  70. <p><strong>Professional Active Server Pages .Net </strong></p>
  71. <img src="1.gif" onclick="details('a.html')"/>
  72. <p><strong>Beginning Dreamweaver MX 2004 </strong></p>
  73. <img src="1.gif" onclick="details('b.html')"/>
  74. </body>
  75. </html>
复制代码
第一本书(与第二本类似):
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7. </script>
  8. </head>
  9. <body>
  10. Professional Active Server Pages .Net
  11. <input type="button" value="add" onclick="window.opener.addBook(101)">
  12. </body>
  13. </html>
复制代码

查询购物车即为空网页






JavaScript经典实例 笔记1 数据 数组
http://udn.yyuap.com/thread-40861-1-1.html

JavaScript经典实例 笔记2 math 数组等方法
http://udn.yyuap.com/thread-40853-1-1.html

JavaScript经典实例 笔记3 表单
http://udn.yyuap.com/thread-40827-1-1.html

JavaScript经典实例 笔记4
http://udn.yyuap.com/forum.php?m ... =1&extra=#pid195615

JavaScript经典实例 笔记5(打开新窗口)
http://udn.yyuap.com/forum.php?m ... =1&extra=#pid193883

JavaScript经典实例 笔记6 字符串操作(1)
http://udn.yyuap.com/forum.php?m ... =1&extra=#pid193871

JavaScript经典实例 笔记7 字符串操作(2)--正则
http://udn.yyuap.com/forum.php?m ... =1&extra=#pid193851

JavaScript经典实例 笔记 8 时间 计时器
http://udn.yyuap.com/forum.php?m ... =1&extra=#pid195393

JavaScript经典实例 笔记9 cookie
http://udn.yyuap.com/forum.php?m ... =1&extra=#pid193945

相关帖子

发表于 2015-8-12 14:35:25 | 显示全部楼层
我完全是被标题<<JavaScript经典实例 笔记5(打开新窗口)>>吸引过来的
使用道具 举报

回复

发表于 2015-8-12 14:35:26 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老面孔的份上回复一下
使用道具 举报

回复

发表于 2015-8-13 23:33:28 | 显示全部楼层
经常看到”山外青山“发帖,辛苦了
点评 ( 1 ) 收起 / 展开点评

静静的小婊妹 2015年08月23日 14:52 详情 回复

楼主好人

使用道具 举报

回复

发表于 2015-8-23 14:52:40 | 显示全部楼层
楼主好人
点评 ( 1 ) 收起 / 展开点评

主席夸我好 2015年08月23日 14:56 详情 回复

好帖子 我学习了

使用道具 举报

回复

发表于 2015-8-23 14:56:24 | 显示全部楼层
好帖子 我学习了
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部