1、基本思路
- 涉及到三個頁面，兩層彈窗
- 第一個頁面需要給第二個頁面傳參
- 第二個頁面需要調用第一個頁面的方法
- 第三個頁面需要調用第一個、第二個頁面的方法
2、第一層頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugins/layer/layer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>第一層頁面</h1>
<button οnclick="openSecond()">打開第二層頁面</button>
</body>
<script type="text/javascript">
function openSecond(){
top.layer.open({
type: 2,
title: "第二層頁面",
content: "second.html",
area: ['1000px', '600px'],
success: function(layero, index){
//獲取第二個頁面
var iframe = window['layui-layer-iframe' + index];
//調用第二個頁面的方法
iframe.firstParams("haha");
}
})
}
//第一層頁面方法
function firstMethod(){
alert("firstMethod");
}
</script>
</html>
3、第二層頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugins/layer/layer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>第二層頁面</h1>
<button οnclick="openThird()">打開第三層頁面</button>
<button οnclick="getFirstMethod()">調用第一層方法</button>
</body>
<script type="text/javascript">
function openThird(){
top.layer.open({
type: 2,
title: "第三層頁面",
content: "third.html",
area: ['600px', '300px'],
})
}
//調用第一個頁面的方法
function getFirstMethod(){
parent.firstMethod();
}
//第二個頁面的方法
function secondMethod(){
alert("secondMethod");
}
</script>
</html>
4、第三層頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>第三層頁面</h1>
<button οnclick="getFirstMethod()">調用第一層方法</button>
<button οnclick="getSecondMethod()">調用第二層方法</button>
<button οnclick="getThirdMethod()">另類調用本頁面方法</button>
</body>
<script type="text/javascript">
//調用第一個頁面的方法
function getFirstMethod(){
parent.firstMethod();
}
//調用第二個頁面的方法
function getSecondMethod(){
top.$("iframe")[0].contentWindow.secondMethod();
}
//另類調用本頁面方法
function getThirdMethod(){
top.$("iframe")[1].contentWindow.thirdMethod();
}
function thirdMethod(){
alert("thirdMethod");
}
</script>
</html>
