Iframe父页面和子页面之间的JS调用-优快云博客

本文通过两个HTML页面的示例，展示了如何使用JavaScript实现父窗口与子窗口之间的消息传递，包括使用传统DOM方法及HTML5的postMessage API。

1.index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function parentResponse() {
                alert('parentResponse');
            }
            //html5
            var onmessage = function(e) {
                console.dir(e);
                parentResponse();
            };
            //
            $(function(){
                //dom
                $('#callChild').click(function(){
                    window.frames["inframe"].childResponse();
                    window.frames["inframe"].postMessage("parentCall", "*");
                });
 
                //html5
                if (typeof window.addEventListener != 'undefined') {
                    window.addEventListener('message', onmessage, false);
                } else if (typeof window.attachEvent != 'undefined') {
                    window.attachEvent('onmessage', onmessage);
                }
            });
        </script>
    </head>
    <body>
        <iframe src="call.html" id="inframe" name="inframe"></iframe>
        <button id="callChild">call child</button>
    </body>
</html>

2.call.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function childResponse() {
                alert('childReponse');
            }
            //html5
            var onmessage = function(e) {
                console.dir(e);
                childResponse();
            };
            //
            $(function(){
                $('#callParent').click(function(){
                    var frame = window.parent;
                    while(frame != frame.parent && frame.name != "app_frame") {
                        frame=frame.parent;
                    }
                    frame.parentResponse();
                    //html5
                    frame.postMessage("childCall", "*");
                });
                //html5
                if (typeof window.addEventListener != 'undefined') {
                    window.addEventListener('message', onmessage, false);
                } else if (typeof window.attachEvent != 'undefined') {
                    window.attachEvent('onmessage', onmessage);
                }
            });
        </script>
    </head>
    <body>
        <button id="callParent">call parent</button>
    </body>
</html>