layer如何放入子html,layer弹出子iframe层父子页面传值的实现方法

本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下：

父页面获取子页面元素

格式：

$("#iframeID").contents().find("#eleID")

示例代码：

father.html

父级页面

.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}

父向子传值

$("#father_dataChange").click(function () {

$("#iframe_dataChange").contents().find("#son_dataChange").html("我是父页面传过来的值……")

})

son.html

子级页面

我是子页面内容，点击“父向子传值”按钮我改变

父页面调用子页面方法

格式：

$("#iframeID")[0].contentWindow.fun()

参数：fun()为子页面的函数

注意：$("#iframeID")[0]后面这个[0]必须要，亲测，删除就报错了，其原因是contentWindow是原生js的方法，所以用.eq(0)都不行。

示例代码：

father.html

父级页面

.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}

父调子函数

$("#father_fun").click(function () {

$("#iframe_fun")[0].contentWindow.son_fun()

})

son.html

子级页面

我是子页面内容，点击“父调子函数”按钮我改变

function son_fun() {

$("#son_fun").html("我变啦！啦啦啦……")

}

子页面获取父页面元素

格式：

$("#fatherID",window.parent.document)

参数：fun()为子页面的函数

示例代码：

father.html

父级页面

我是父页面内容，点击“子向父传值”按钮我改变

son.html

子级页面

.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}

子向父传值

$("#son_dataChange").click(function () {

$("#father_dataChange",window.parent.document).html("变咯……");

});

子页面调用父页面方法

格式：

parent.ele

参数：fun()为子页面的函数

示例代码：

father.html

父级页面

var ml_var="我是父级定义的变量";

function ml() {

alert("我被调用了！")

}

son.html

子级页面

.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}

点我后记得看控制台哟

$("#son_dataChange").click(function () {

console.log(parent.ml_var);

parent.ml();

});

layer弹出iframe层

layer弹出iframe层，其他都差不多，主要是如何找到iframe，先看下一般的layer调用iframe弹框代码：

layer.open({

type: 2,

title: '我是子iframe页面',

shadeClose: true,

shade: 0.8,

area: ['380px', '90%'],

content: './son.html' //iframe的url

});

于是我就想给这个iframe弹框设置一个id，

layer.open({

id:"son",

type: 2,

title: '我是子iframe页面',

shadeClose: true,

shade: 0.8,

area: ['380px', '90%'],

content: './son.html' //iframe的url

});

再通过这个id进行操作，操作方法和上面介绍的方法对应就可以，可是这种方法太繁琐，我又找了个更好的办法——利用layer的success回调函数：

layer.open({

type: 2,

title: '我是子iframe页面',

shadeClose: true,

shade: 0.8,

area: ['380px', '90%'],

content: './son.html', //iframe的url

success:function(dom){

let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();

$iframeDom.find("#test").html("我是从父级传来的值哟……")

}

});

示例代码：

father.html

父级页面

.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}

layer弹出iframe层

$("#father_dataChange").click(function () {

layer.open({

id:"son",

type: 2,

title: '我是子iframe页面',

shadeClose: true,

shade: 0.8,

area: ['380px', '90%'],

content: './son.html',

success:function(dom){

let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();

$iframeDom.find("#test").html("我是从父级传来的值哟……")

}

});

})

son.html

子级页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。