练习：window弹窗案例

最新推荐文章于 2021-06-10 16:31:28 发布

风动云彩

最新推荐文章于 2021-06-10 16:31:28 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/qq_41300571/article/details/79533115

版权

案例：window弹窗案例
- 实现过程
1、创建一个页面
** 有两个输入项和一个按钮
** 按钮上面有一个事件：弹出一个新窗口 open

2、创建弹出页面
** 表格
** 每一行有一个按钮和编号和姓名
** 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置

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

－　opener:属性，获取创建当前窗口的窗口

代码示例：

第一个HTML页面：

<!DOCTYPE html>
<html>
  <head>
    <title>window.html</title>

    <meta name="content-type" content="text/html; charset=gbk">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
    function open1(){
    open("user.html","","width=350,height=200");
    }
    </script>
  </head>
  
  
  <body>
    编号：<input type="text" id="id"/><br/>
    姓名：<input type="text" id="name"/><br/>
    <input type="button" value="选择" onclick="open1();"/>
    
  </body>

</html>

第二个HTML页面：

<!DOCTYPE html>
<html>
  <head>
    <title>user.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gbk">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


  </head>
  
  <body>
  <table border="1" bordercolor="red">
  <tr>
  <td>操作</td>
  <td>姓名</td>
  <td>编号</td>
  </tr>
  <tr>
  <td><input type="button" value="选择" onclick="s1('100','东方不败')"/></td>
  <td>100</td>
  <td>东方不败</td>
  </tr>
  <tr>
  <td><input type="button" value="选择" onclick="s1('101','逍遥子')"/></td>
  <td>101</td>
  <td>逍遥子</td>
  </tr>
  <tr>
  <td><input type="button" value="选择" onclick="s1('102','南帝')"/></td>
  <td>102</td>
  <td>南帝</td>
  </tr>
  
  </table>
  <script type="text/javascript">
  function s1(id,name){
  var open=opener;
  open.document.getElementById("id").value=id;
  open.document.getElementById("name").value=name;
  window.close();
  }
  </script>
  </body>

</html>

效果展示：

风动云彩

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
练习：window弹窗案例

案例：window弹窗案例- 实现过程1、创建一个页面** 有两个输入项和一个按钮** 按钮上面有一个事件：弹出一个新窗口 open2、创建弹出页面** 表格** 每一行有一个按钮和编号和姓名** 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置****//实现s1方法function s1(num1,name1) {//需要把num1和name1赋值到win...
复制链接

扫一扫