父页面获取子页面元素
格式：
$("#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
子级页面
好了，希望对大家有用，觉得有用，也请关注我或者点个赞哟~
