zoukankan      html  css  js  c++  java
  • 实现iframe与iframe父层的数据交互

    介绍:

    在iframe中无法操作父页面,父页面也无法访问到iframe内部的节点。iframe层无法使用父层的公用方法等问题的解决方法。

    想要实现的功能:

    1.在子页面中引入jquery.js,在父页面中可以应用。(或子页面想要使用父页面的jquery.js或其他公用方法)

    2.在子页面可以通过jquery选择器访问到并操作父页面的节点。

    3.在父页面中可以通过jquery选择器访问到并操作子页面的节点。

    代码:

    a.htm 如下

    复制代码
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>a.html</title>
    </head>
    <body>
        <div id="a">
            <iframe id="archives" src="b.htm" frameborder="0"></iframe>
        </div>
    <script src="js/a.js"></script>
    </body>
    </html>
    复制代码

    b.htm如下

    复制代码
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>a.html</title>
    </head>
    <body>
    <div id="b"> 我是iframe里面的内容 </div> <script src="js/jquery.js"></script> <script src="js/b.js"></script> </body> </html>
    复制代码

    实现方式:

    a.js如下

    复制代码
    /* 实现iframe层与iframe父层的数据交互
     *
     * 在页面加载完之后,才能收到iframe层传过来的jquery.
    * 使用从iframe层传过来的jquery的时候,$选择器默认都在iframe层查找, * 如果iframe的父层想要使用$选择器,需要在使用的时候填写$选择器的第二个参数context为自身的document. * 示例:$('#main'),如果#main在iframe层的外部。应该写为$('#main',document).
    */ 
    window.onload
    =function(){
    // 在父页面中访问父页面的节点:
    // $('#a',document);
    // 在父页面中访问子页面的节点:
    // $('#b');

    }
    复制代码

    b.js如下:

    复制代码
    /*
     * iframe层与iframe父层的数据交互。
     */
    (function(){
    
        //把iframe层的jquery传送给iframe的父层。
        window.top.$ = window.$;
    //定义Gloabal,Gloabal包涵所有的全局函数。页面加载时需要Global传送给iframe的父层。 window.top.Global = window.Global = {};
    //在子页面中访问并操作父页面的节点
    $('#a',window.top.document);

       })();
    复制代码
  • 相关阅读:
    WPF PasswordBox不支持绑定解决方法
    获取当前日期是第几个星期
    WPF 事件触发命令
    EntityFramework使用动态Lambda表达式筛选数据
    C#发邮件
    Entity Framework 多对多查询的写法
    获取WPF窗口句柄
    C#调整图片亮度和对比度
    oracle 批量修改数据
    react前端自动化测试: jest + enzyme
  • 原文地址:https://www.cnblogs.com/phpdragon/p/2793157.html
Copyright © 2011-2022 走看看