子窗体通过js本身window传值父窗体(进阶)

前言:

经过一段时间测试,终于让我测试出来了通过window,top,本身传参,高兴之余立马记上,毕竟好记性不如烂笔头嘛,滑稽.png

1.首先创建一个 index.html 文件。代码附上。。。,太懒了,笑哭

目录

2. 在 index.html 文件中引入 layui.js,layu.css 文件。

index.html 中

<button class="layui-btn">弹窗</button>

方法一(父传子)

//定义一个方法,用于传给 iframe1 子页面
var _tools={
  func1:function(){
    console.log('func1');
  }
}
                
_tools.func1();
window._tools=_tools;
 layui.use(['layer','jquery'], function() {
    var layer = layui.layer;
    var $=layui.$;
                                
        该位置为上述代码位置....

//通过按钮触发弹窗
$("button").click(function(){
  layer.open({
    type: 2,
    title: "弹窗1",
    area: ["600px", "400px"],
    shade: 0.4,
    scrollbar: false, //禁止滚动条
    resize: false, //禁止拉伸
    maxmin: false, //最大化
    content: "view/iframe1.html", //链接网页iframe
    zIndex: layer.zIndex,
    id: "iframe1",
    success: function (layero, index) {
     ......
    },
    cancel:function(index,layero){
          //获取打开的 iframe ID 和 name 【id 和 name 是相同的】,这一句是多余的
          var iframe=window['layui-layer-iframe'+index];
          > 重点:获取子页面传参的方法
          > window:本身窗体,_load:iframe1 页面的方法名,func2():iframe1 页面的方法
          window._load.func2();
          //关闭页面
          layer.close(index);
    }
  });
  })
  });               

方法二(父传子)
在上述代码中的 success 中加入这么一行代码,这就是将数据传给打开的 iframe 页面。
重点:在打开的iframe1 中需要创建一个 child 方法

var iframe=window['layui-layer-iframe'+index];
var data={
  name:'Andy',
  age:30
};
iframe.child(data);

3. iframe1.html

iframe1.html 前端代码就看实际需求走了,关键是回传参数,下面的是 iframe1 的脚本。

- 方法一

//调用父页面方法
top._tools.func1();

var _load={
    func2:function(){
        console.log('1');
    }
}

// load.func2(); 打开页面时输出1

> 重点:parent.window:指index.index父层    ._load :给父层一个方法
parent.window._load=_load;

- 方法二
function child(value){
  console.log(value);

  - 如果想将value回传给index 页面
    可以参考方法一,需要 return,否则在index页面调用该方法时输出 underfind
    var _load={
        func2:function(){
            return value;
        }
    }
}

4. 结果

此方法可适用于任何两层之间父子页面,在A(最底层 index.html),B(中间层 iframe1.html),C(最上层 iframe2.html)
三页面中 可B->C,C->B,A-B,B-A

实践出真知

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,135评论 6 514
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,317评论 3 397
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,596评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,481评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,492评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,153评论 1 309
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,737评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,657评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,193评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,276评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,420评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,093评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,783评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,262评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,390评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,787评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,427评论 2 359

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,006评论 0 13
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,440评论 0 17
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,109评论 1 32
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,221评论 0 3
  • 第一章 无知的活着 生而为人,与众不同,就这样,我们过着不同的人生,...
    姜东岩阅读 183评论 0 1