javascript_父子窗口交互_ZC测试

ZC：是否需要在tomcat等里面才能使用？--> ZC：chrome for windows 版本 64.0.3282.186（正式版本）（32 位）测试下来：本地文件形式（不成功）；放到Tomcat7中（成功）

ZC：SVG是否适用？--> ZC：适用，下面有测试代码。

1、JavaScript实现父子两个窗口之间互相通信 - CSDN博客.html（http://blog.csdn.net/a352193394/article/details/7487223）

2、ZC：我的测试代码（是上面文章中的代码修改得来的，保存成UTF-8编码格式）

　　2.1、父窗体（f.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>father.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function test(){//moveto是按照当前屏幕定位窗口，moveby是根据当前窗口左上角位置再次定位
                window.moveTo(100, 100);
            }

            function test2(){//重新改变大小
                window.resizeTo(400, 500);
            }

            function test3(){//在原来窗口大小的基础上增加一定的程度和宽度
                window.resizeBy(100, 200);
            }

            var g_newWin = null;

            function test4()//_black是打开新的窗口，不替换原来的窗口
            {
                //newWin其实是打开的新窗口的句柄
                g_newWin = window.open("s.html", "_blank");

                //g_newWin.document.getElementById("info").value = "哈哈";
                setTimeout( FnTomeout, 500 );// ZC: 这里我测试下来，需要延时一下，才能成功，像上面那样直接设置-->不成功...
            }

            function FnTomeout()
            {
                g_newWin.document.getElementById("info").value = "哈哈";
            }
        </script>
    </head>

    <body>
        This is my HTML page. <br>
        <input type="button" onclick="test();" value="移动"/><br/>
        <input type="button" onclick="test2();" value="改变大小"/><br/>
        <input type="button" onclick="test3();" value="增加大小"/><br/>
        <input type="button" onclick="test4();" value="打开新窗口"/><br/>

        <div id="mydiv" style="border: 3px solid red; width:100px; height:50px;"></div>
    </body>
</html>

　　2.2、子窗体（s.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>son.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
        function notify()//获取当前输入内容信息，传递给父窗口
        {
            var val = document.getElementById("info").value;
            window.opener.document.getElementById("mydiv").innerText = val;
        }
        </script>
    </head>

    <body>
        我是新窗口
        <input type="text" id="info"/><br/>
        <input type="button" value="通知给父窗口" onclick="notify();"/>
    </body>
</html>

3、测试父窗体打开 SVG文件

　　3.1、father.html（UTF-8）

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <script type="text/javascript" >
    <!--

        var g_newWin = null;

        window.onload = function()
        {
        };

        function NewWindow()//_black是打开新的窗口，不替换原来的窗口
        {
            //newWin其实是打开的新窗口的句柄
            g_newWin = window.open("son.svg", "_blank");

            //g_newWin.document.getElementById("info").value = "哈哈";
            g_newWin.onload = FnNewWinLoad;
        }

        function FnNewWinLoad(_event)
        {
            //alert("FnNewWinLoad");
            console.log("FnNewWinLoad");
            console.log("_event : "+_event);

            // ZC: 下面的测试，能取到"rect01"，不能取到说明 dom是g_newWin.document而非 本页面的document
            var dom = _event.target;
            var rect01 = dom.getElementById("rect01");
            console.log("rect01 : "+rect01);
            var btn01 = dom.getElementById("btn01");
            console.log("btn01 : "+btn01);
        }

    -->
    </script>

</head>

<body>

    <input id="btn01" type="button" onclick="NewWindow();" value="打开新窗口"/><br/>
    <div id="mydiv" style="border: 3px solid red; width:100px; height:50px;"></div>

</body>
</html>

　　3.2、son.svg（UTF-8）

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1000" height="800" viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg">

    <style type="text/css">
    <![CDATA[
    <!--

    -->
    ]]>
    </style>

    <script type="text/javascript" >
    <![CDATA[
    <!--
    /*
    window.onload = function()
    {
    };
    //*/

    function FnRect01Click()
    {
        window.opener.document.getElementById("mydiv").innerText = "SVG 发来的信息";
    }

    -->
    ]]>
    </script>

    <defs/>

    <rect id="rect01" x="100" y="100" width="100" height="50" stroke="red" stroke-width="2" fill="red" onclick="FnRect01Click()"/>
    
</svg>

4、

5、

6、

7、

8、

posted @ 2017-02-20 08:35 Html5Skill 阅读(270) 评论(0) 收藏举报

刷新页面返回顶部

Html5Skill

javascript_父子窗口交互_ZC测试

公告