HTML 父窗口与子窗口通信

父窗口:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var sonWin = null;
                document.getElementById("button1").onclick=function(){
                    sonWin = window.open("Son.html","Son","width=300px,height=300px");
                }
                
                document.getElementById("button2").onclick=function(){
                    sonWin.document.getElementById("Sontext").value = document.getElementById("Fathertext").value;
                }
            }
        </script>
    </head>
    <body>
            <input type="button" name="button1" id="button1" value="打开窗口" />
            <input type="text" name="Fathertext" id="Fathertext" value="请输入.." />
            <input type="button" name="button2" id="button2" value="发送" />
    </body>
</html>

子窗口:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById("button3").onclick=function(){
                    window.opener.document.getElementById("Fathertext").value=document.getElementById("Sontext").value;
                }
            }
        </script>
    </head>
    <body>
        <input type="text" name="Sontext" id="Sontext" value="请输入.." />
        <input type="button" name="button3" id="button3" value="发送" />
    </body>
</html>

 

posted on 2017-11-21 22:42  李洋1991  阅读(1541)  评论(0编辑  收藏  举报