layer彈出子iframe層父子頁面?zhèn)髦档膶?shí)現(xiàn)方法
更新時(shí)間：2018年11月22日 10:05:39 作者：MaramLee
這篇文章主要介紹了layer彈出子iframe層父子頁面?zhèn)髦档膶?shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文介紹了layer彈出子iframe層父子頁面?zhèn)髦档膶?shí)現(xiàn)方法，分享給大家，具體如下：
父頁面獲取子頁面元素
格式：
$("#iframeID").contents().find("#eleID")
示例代碼：
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父級(jí)頁面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="father_dataChange" class="btn">父向子傳值</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
$("#father_dataChange").click(function () {
$("#iframe_dataChange").contents().find("#son_dataChange").html("我是父頁面?zhèn)鬟^來的值……")
})
</script>
</body>
</html>
son.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子級(jí)頁面</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <div id="son_dataChange">我是子頁面內(nèi)容，點(diǎn)擊“父向子傳值”按鈕我改變</div> </body> </html>
父頁面調(diào)用子頁面方法
格式：
$("#iframeID")[0].contentWindow.fun()
參數(shù)：fun()為子頁面的函數(shù)
注意：$("#iframeID")[0]后面這個(gè)[0]必須要，親測(cè)，刪除就報(bào)錯(cuò)了，其原因是contentWindow是原生js的方法，所以用.eq(0)都不行。
示例代碼：
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父級(jí)頁面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="father_fun" class="btn">父調(diào)子函數(shù)</span>
</div>
<iframe id="iframe_fun" src="son.html" frameborder="0"></iframe>
<script>
$("#father_fun").click(function () {
$("#iframe_fun")[0].contentWindow.son_fun()
})
</script>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子級(jí)頁面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="son_fun">我是子頁面內(nèi)容，點(diǎn)擊“父調(diào)子函數(shù)”按鈕我改變</div>
<script>
function son_fun() {
$("#son_fun").html("我變啦！啦啦啦……")
}
</script>
</body>
</html>
子頁面獲取父頁面元素
格式：
$("#fatherID",window.parent.document)
參數(shù)：fun()為子頁面的函數(shù)
示例代碼：
father.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父級(jí)頁面</title> </head> <body> <div id="father_dataChange">我是父頁面內(nèi)容，點(diǎn)擊“子向父?jìng)髦怠卑粹o我改變</div> <iframe src="son.html" frameborder="0"></iframe> </body> </html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子級(jí)頁面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="son_dataChange" class="btn">子向父?jìng)髦?lt;/span>
</div>
<script>
$("#son_dataChange").click(function () {
$("#father_dataChange",window.parent.document).html("變咯……");
});
</script>
</body>
</html>
子頁面調(diào)用父頁面方法
格式：
parent.ele
參數(shù)：fun()為子頁面的函數(shù)
示例代碼：
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父級(jí)頁面</title>
</head>
<body>
<iframe src="son.html" frameborder="0"></iframe>
<script>
var ml_var="我是父級(jí)定義的變量";
function ml() {
alert("我被調(diào)用了！")
}
</script>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子級(jí)頁面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="son_dataChange" class="btn">點(diǎn)我后記得看控制臺(tái)喲</span>
</div>
<script>
$("#son_dataChange").click(function () {
console.log(parent.ml_var);
parent.ml();
});
</script>
</body>
</html>
layer彈出iframe層
layer彈出iframe層，其他都差不多，主要是如何找到iframe，先看下一般的layer調(diào)用iframe彈框代碼：
layer.open({
type: 2,
title: '我是子iframe頁面',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: './son.html' //iframe的url
});
于是我就想給這個(gè)iframe彈框設(shè)置一個(gè)id，
layer.open({
id:"son",
type: 2,
title: '我是子iframe頁面',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: './son.html' //iframe的url
});
再通過這個(gè)id進(jìn)行操作，操作方法和上面介紹的方法對(duì)應(yīng)就可以，可是這種方法太繁瑣，我又找了個(gè)更好的辦法——利用layer的success回調(diào)函數(shù)：
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("我是從父級(jí)傳來的值喲……")
}
});
示例代碼：
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父級(jí)頁面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="layer.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="father_dataChange" class="btn">layer彈出iframe層</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
$("#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("我是從父級(jí)傳來的值喲……")
}
});
})
</script>
</body>
</html>
son.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子級(jí)頁面</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <div id="test"></div> </body> </html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要分享了原生js實(shí)現(xiàn)打字動(dòng)畫游戲的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
用js+iframe形成頁面的一種遮罩效果的具體實(shí)現(xiàn)
用js形成頁面的一種遮罩效果，選擇想要進(jìn)行遮罩的窗口，在這里想要遮罩的是一個(gè)iframe窗口，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參參考下2013-12-12
JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作實(shí)例小結(jié)
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)dom元素節(jié)點(diǎn)、屬性的相關(guān)獲取、設(shè)置等操作技巧,需要的朋友可以參考下2019-01-01
JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理
這篇文章主要介紹了JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
JS遍歷頁面所有對(duì)象屬性及實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S遍歷頁面所有對(duì)象屬性及實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要源碼解讀了Bootstrap模態(tài)彈出框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家總結(jié)了Bootstrap Table使用心得,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
JS實(shí)現(xiàn)IE狀態(tài)欄文字縮放效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)IE狀態(tài)欄文字縮放效果代碼,涉及JavaScript針對(duì)瀏覽器的相關(guān)調(diào)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Javascript URI 解析介紹,本文直接給出代碼示例,需要的朋友可以參考下2015-03-03
JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家分享JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)方法，需要的朋友參考下吧2017-09-09