zoukankan      html  css  js  c++  java
  • js子窗口和父窗口交互

    1.父窗口传递信息给子窗口
    程序代码

    1.父窗口传递信息给子窗口
    程序代码
    <script language=javascript>
    
    function outPut(){
       //获取父窗口的文本信息赋值给text
       var text = document.abc.text.value;
       //打开子窗口,并且把操作句柄赋值给win变量,以下所有操作都是针对win对象的
    var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
        //输出基本信息
       win.document.writeln("<title>输出结果</title>");
        win.document.writeln("你的信息是:<p>");
        //输出从父窗口获取的信息
       win.document.writeln(text);
        win.document.close();
        win.focus();
    }
    </script>
    <form name=abc method=post>
    <input type=text name=text size=50>
    //调用上面的函数
    <input type=button value=提交 onClick="outPut()">
    
    </form>

    2.子窗口传递参数给父窗口
    程序代码

    <script language=javascript>
    
    function outPut(){
        var text = document.abc.text.value;
        var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
       win.document.writeln("<title>输出结果</title>");
       win.document.writeln("你的信息是:<p>");
       win.document.writeln(text);
       win.document.writeln("<input type=text name=child value=子窗口信息>");
    
       //对子窗口本身操作,使用self对象,对父窗口操作使用opener对象,这是关键
      //把子窗口中表单的值回传给父窗口,取代父窗口表单以前的值,然后关闭子窗口
      win.document.writeln("<input type=button value=关闭自己 onClick='window.opener.abc.text.value=self.child.value;self.close()'>");
      //可以控制关闭父窗口
      win.document.writeln("<input type=button value=关闭父窗口    onClick='window.opener.opener=null;window.opener.close()'>");
      //刷新父窗口
      win.document.writeln("<input type=button value=刷新父窗口 onClick='window.opener.location.reload()'>");
    
      win.document.close();
      win.focus();
    }
    </script>
    <form name=abc method=post>
    <input type=text name=text size=50>
    <input type=button value=提交 onClick="outPut()">
    
    </form>
  • 相关阅读:
    Win7 中出现图标显示不全或消失的解决方法
    动态控制ToolStrip上ToolStripButton的图标大小
    TS——类型断言
    TS——函数的类型
    TS之对象类型——接口
    TS——联合类型
    Git文件合并
    1-1、作用域深入和面向对象
    webStrom2017.1版本如何添加vue.js插件
    二:搭建一个webpack3.5.5项目:建立项目的webpack配置文件
  • 原文地址:https://www.cnblogs.com/yaowukonga/p/2873047.html
Copyright © 2011-2022 走看看