js之弹出子窗口

关于弹出框,之前在项目中,一直想添加,奈何好多都忘了,今天重新学了一把,废话少说,直接上效果与源码分析

一、简单实现效果

js之弹出子窗口_第1张图片

建议大家不再在学习window.showModalDialog了,这个方法在2014年已经被谷歌等主流浏览器取消函数了

二、源码

首先我们有父窗口与子窗口,并且子窗口能将数据传送到父窗口中

父窗口源码

<script language="JavaScript">

    <script language="JavaScript">

    //弹出框

    function openWin() {

        window.open("jump.html", "_blank",'height=200,width=400,status=yes,top=200,left=400,toolbar=no,menubar=no,location=no')

    }

    function setValue(sid,sname) {

        document.getElementById("sid").value=sid;

        document.getElementById("sname").value=sname;

    }

script>

<body>

    <form name="form1" action="test.html" method="post">

        学号: <input type="text" name="sid" value="" id="sid"><br>

        姓名:<input type="text" name="sname" value="" id="sname">

        <input type="button" name="ok" value="请选择学生" onclick="openWin();" />

    form>

body>

在此简单解释

 

        /*

          *  window.open( sURL , sName , sFeatures)

          *    * sURL:指定要被加载的HTML文档的URL地址。假如无指定值,则 about:blank 的新窗口会被显示

          *    * sName:指定打开的窗口的名字

          *       * _blank: 在新窗口中打开 sUrl 

          *       * _self:sUrl 在当前窗口中打开,覆盖当前文档

          *       * sFeatures:指定窗口装饰样式。使用下面的值。多个之间用逗号隔开.

                              */

其余的详细解释以及属性设置可以到w3c、菜鸟教程等网站去查询,这里不多做解释

子窗口

<script language="JavaScript">

    function viewData(sid, sname) {

       var student = window.opener;

       //方法一

//     student.document.getElementById("sid").value=sid;

//     student.document.getElementById("sname").value=sname;

       //方法二

       student.setValue(sid, sname);

       window.close();

    }

script>

<body>

    <table border="1">

       <tr>

           <td>操作td>

           <td>学号td>

           <td>姓名td>

       tr>

 

       <tr>

           <td><input type="button" value="选择" id="ss" onclick="viewData('161530254','石腾飞')">td>

           <td>161530254td>

           <td>石腾飞td>

       tr>

       <tr>

           <td><input type="button" value="选择" onclick="viewData('161530000','超级用户')">td>

           <td>161530000td>

           <td>超级用户td>

       tr>

    table>

body>

在这里着重解释一下,关于获取父窗口的所有内容和对象,在子窗口使用;

var student = window.opener;

Window.opener:网上解释是:可返回对创建该窗口的 Window 对象的引用,即简单的来说就是Window.opener返回值是就是代表父窗口可以用如下方式给父窗口的id为sid的元素赋值

student.document.getElementById("sid").value=sid;

当然还有方法二:方法二比较好看,感觉牛逼,其实都一样

在父窗口里封装一个函数

function setValue(sid,sname) {

        document.getElementById("sid").value=sid;

        document.getElementById("sname").value=sname;

        }

在子窗口中调用

student.setValue(sid, sname);

千万要记得无论什么方法都要记得使用完毕,关闭子窗口

window.close();

 

 

你可能感兴趣的:(js基础)