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);

       })();
    复制代码
  • 相关阅读:
    HDU-4027-Can you answer these queries?
    Python的多协程(三种简单生成多协程方法)
    关于django 如何实现简单api的restful 接口
    flask 框架服务原理
    DVWA渗透测试环境搭建
    装饰器 python 你也可以叫语法糖
    websocket python实现原理
    robotframe 自定义开发库
    mysql linux 安装卸载
    python+jenkins 构建节点环境编译器配置问题
  • 原文地址:https://www.cnblogs.com/phpdragon/p/2793157.html
Copyright © 2011-2022 走看看