JavaScript基础学习（四）弹窗案例

案例：window弹窗案例
       一、实现过程
                (1)创建一个页面
           -1.有两个输入项和一个按钮
           -2.按钮上面有一个事件，弹出一个新窗口 open
           （2）创建弹出页面
           -1.表格
           -2.每一个有一个按钮和编号和姓名

-3.按钮上有一个事件：把当前的编号和姓名复制到第一个页面相应的位置

           function s1(num1,name1){
               //需要把num1和name1赋值到window页面
               //跨页面的操作：opener:得到创建这个窗口的窗口得到window页面
               var pwin = window.opener;
               pwin.document.getElementById("numid").value = num1;
               pwin.document.getElementById("nameid").value = name1;
               //关闭窗口
               window.close();
           }

           --opener：属性，获取当前窗口的窗口

           --做这个案例的时候会有一个问题
               *由于现在访问的是本地文件，js安全性，谷歌浏览器安全级别很高，不允许访问本地文件
               *在实际开发中，没有这样的问题，实际中不可能访问本地文件

<html>
 <head>
  <style type="text/css">
 
  </style>
 </head>

 <body>
 编号：<input type= "text" id="numid"/><br/>
 姓名：<input type= "text" id="nameid"/><br/>
 <input type="button" value="选择" onclick="open1()"/>
    
 </body>
 <script type="text/javascript">
        function open1(){
                //open方法
                window.open("user.html","","width=300,height=200");
        }
    </script>  
</html>

<html>
 <head>
  <style type="text/css">
 

  </style>
 </head>

 <body>
    <table  border="1" bordercolor="blue" width="250" height="180">
    <tr>
        <td>操作</td>
        <td>编号</td>
        <td>姓名</td>
    </tr>
    <tr>
        <td><input type= "button" value="选择" onclick="s1('90','李白')"/></td>
        <td>90</td>
        <td>李白</td>
    </tr>
    <tr>
        <td><input type= "button" value="选择" onclick="s1('89','韩信')"/></td>
        <td>89</td>
        <td>韩信</td>
    </tr>
    <tr>
        <td><input type= "button" value="选择"  onclick="s1('88','玄策')"/></td>
        <td>88</td>
        <td>玄策</td>
    </tr>
    </table>
 </body>
 <script type="text/javascript">

            function s1(num1,name1){
                //需要把num1和name1赋值到window页面
                //跨页面的操作：opener:得到创建这个窗口的窗口  得到window页面
                var pwin = window.opener;
                pwin.document.getElementById("numid").value = num1;
                pwin.document.getElementById("nameid").value = name1;
                //关闭窗口
                window.close();
            }
            
            

    </script>  
</html>

JavaScript基础学习（四）弹窗案例

猜你喜欢