zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Mysql 小技巧
    关于提交form不刷新的问题
    取消超链接点击默认事件
    JS获取地址栏参数
    Maven 手动添加 JAR 包到本地仓库
    Mysql函数instr、locate、position VS like
    阿里巴巴常考面试题及汇总答案
    JS跳转action
    Struts2使用ModelDriven后JSON数据返回不正确
    简单的使用AngularJS的解析JSON
  • 原文地址:https://www.cnblogs.com/s313139232/p/10430151.html
Copyright © 2011-2022 走看看