激情偷乱人伦小说视频最新章节,日韩午夜福利免费理论片秋秋

layer如何實現(xiàn)彈出子iframe層父子頁面?zhèn)髦?/h1>

發(fā)布時間：2021-08-02 10:34:27 來源：億速云閱讀：160 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)layer如何實現(xiàn)彈出子iframe層父子頁面?zhèn)髦档膬?nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

父頁面獲取子頁面元素

格式：

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

示例代碼：

father.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父級頁面</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>子級頁面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="son_dataChange">我是子頁面內(nèi)容，點擊“父向子傳值”按鈕我改變</div>
</body>
</html>

父頁面調(diào)用子頁面方法

格式：

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

參數(shù)：fun()為子頁面的函數(shù)

注意：$("#iframeID")[0]后面這個[0]必須要，親測，刪除就報錯了，其原因是contentWindow是原生js的方法，所以用.eq(0)都不行。

示例代碼：

father.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父級頁面</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>子級頁面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="son_fun">我是子頁面內(nèi)容，點擊“父調(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>父級頁面</title>
</head>
<body>
<div id="father_dataChange">我是父頁面內(nèi)容，點擊“子向父傳值”按鈕我改變</div>
<iframe src="son.html" frameborder="0"></iframe>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子級頁面</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">子向父傳值</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>父級頁面</title>
</head>
<body>
<iframe src="son.html" frameborder="0"></iframe>
<script>
  var ml_var="我是父級定義的變量";
  function ml() {
   alert("我被調(diào)用了！")
  }
</script>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子級頁面</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">點我后記得看控制臺喲</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
});

于是我就想給這個iframe彈框設(shè)置一個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回調(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("我是從父級傳來的值喲……")
 }
});

示例代碼：

father.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父級頁面</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("我是從父級傳來的值喲……")
   }
  });
 })
</script>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子級頁面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>

感謝各位的閱讀！關(guān)于“l(fā)ayer如何實現(xiàn)彈出子iframe層父子頁面?zhèn)髦怠边@篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽