• 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

  • 相关阅读:
    JavaScript对象的几种创建方式?
    TCP 三次握手,四次挥手
    常用的状态码
    前后端分离的接口规范
    京东架构师:日均 5 亿查询量的ElasticSearch架构如何设计?
    [转] 谈谈Spring中都用到了那些设计模式?
    [转]Post和Get的区别
    [转]17个常用的JVM参数
    从入门到熟悉HTTPS的9个问题
    布式事务和解决方案理论
  • 原文地址:https://www.cnblogs.com/s313139232/p/10430151.html
Copyright © 2020-2023  润新知