Iframe父页面和子页面之间的JS调用

最新推荐文章于 2024-03-20 15:53:03 发布

yufeng_0924

最新推荐文章于 2024-03-20 15:53:03 发布

阅读量83

点赞数

分类专栏： Web 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yufeng_0924/article/details/84248077

版权

Web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>

yufeng_0924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Iframe父页面和子页面之间的JS调用

1.index.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;script type="text/javascri
复制链接

扫一扫

专栏目录