• iframe之父子页面通信


    iframe之父子页面通信

    1、获取 子页面 的 window 对象 

    在父页面中,存在如下两个对象

    window.frames

    document.iframeElement.contentWindow

    可以获取到 子页面 window 对象

    // iframe id
    document.getElementById('menuIframe').contentWindow
    
    // iframe name
    window.frames['menuIframe'].window
    
    // iframe index 当前窗体的第几个 iframe
    window.frames[1].window

    既然拿到了 window 对象,那函数和DOM就到手了。

    2、子 iframe 获取 父页面

    window.parent 对象

    window.top对象

    // 判断当前页面是否是 iframe 或 顶级页面
    window.parent == window
    window.top == window

    window.parent 即为当前页面的上一级页面的 window 对象,如果当前页面已是 顶层 页面,则 window.parent 就是自己。

    3、小实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <iframe src="/sub.html" name="iframeContainer" id="iframeContainer"></iframe>
        <script type="text/javascript">
            function parentHello() {
                alert("this is parent hello function!");
            }
            window.frames['iframeContainer'].subHello();
        </script>
    </body>
    </html>
    
    <!-- sub.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            function subHello() {
                alert("this is sub hello function!");
            }
    
            window.parent.parentHello();
        </script>
    </body>
    </html>
    

      

    转载自:https://my.oschina.net/sallency/blog/1618971

  • 相关阅读:
    作为一个 .NET 开发者 应该了解哪些知识?
    服务器扩容,新加一上硬盘,是否要重做raid
    DB2常见错误
    Eclipse快捷键与Notepad++ 快捷建冲突的问题
    Java+MySql图片数据保存
    也谈设计模式Facade
    MyBatis入门级Demo
    Python中的字符串与字符编码
    Python流程控制语句
    Python中的运算符
  • 原文地址:https://www.cnblogs.com/s313139232/p/10430151.html
Copyright © 2020-2023  润新知