子窗体通过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

实践出真知

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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