zoukankan      html  css  js  c++  java
  • iframe子页面与父页面通信

    同域下父子页面的通信

    父页面:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript">
            function say(){
                alert("调用父页面方法成功");
            }
            function callChild(){
                myFrame.window.say();
                myFrame.window.document.getElementById("button").value="调用结束";
                console.dir(myFrame);
            }
        </script>
    </head>
    <body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
    <iframe name="myFrame" src="child.html"></iframe>
    </body>
    </html>

    子页面:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript">
            function say(){
                alert("调用子页面方法成功");
            }
            function callParent(){
                parent.say();
                parent.window.document.getElementById("button").value="调用结束";
                console.dir(parent.window);
            }
        </script>
    </head>
    <body>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
    </body>
    </html>

    方法调用

    父页面调用子页面方法:FrameName.window.childMethod();

    子页面调用父页面方法:parent.window.parentMethod();

    DOM元素访问

    获取到页面的window.document对象后,即可访问DOM元素

    注意事项

    要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

    1. iframe上用onload事件

    2. 用document.readyState=="complete"来判断


    作者:狂流
    出处:http://www.cnblogs.com/kuangliu/
    欢迎转载,分享快乐! 如果觉得这篇文章对你有用,请抖抖小手,推荐一下!

  • 相关阅读:
    [LintCode] Maximum Subarray Difference
    [HDU 3415] Max Sum of Max-K-sub-sequence
    [LintCode] Count of Smaller Number before itself
    [LeetCode] Invert Binary Tree
    [LintCode] Max Tree
    [LeetCode] Implement Stack using Queues
    [LintCode] Maximum Subarray III
    [LeetCode] Basic Calculator & Basic Calculator II
    [LeetCode] Rectangle Area
    Tensorflow[目录结构]
  • 原文地址:https://www.cnblogs.com/kuangliu/p/4415274.html
Copyright © 2011-2022 走看看