快捷導(dǎo)航

layui.layer彈出層(子頁(yè)面)改變父頁(yè)面內(nèi)容（訪問(wèn)元素和函數(shù)）

更新時(shí)間：2023年02月25日 11:02:55 投稿：yin

當(dāng)前頁(yè)面（父框架或父頁(yè)面）使用layer以iframe層的方式彈出新的窗口（子框架或子頁(yè)面）時(shí)，如何在子頁(yè)面中訪問(wèn)父頁(yè)面的元素和函數(shù)，從而改變父元素的頁(yè)面顯示，給用戶合理舒適的體驗(yàn)。

一、layer.open() 方法重要參數(shù)使用回顧

content - 內(nèi)容

content可傳入的值是靈活多變的，不僅可以傳入普通的html內(nèi)容，還可以指定DOM，更可以隨著type的不同而不同。

/!*
 如果是頁(yè)面層
 */
layer.open({
  type: 1, 
  content: '傳入任意的文本或html' //這里content是一個(gè)普通的String
});
layer.open({
  type: 1,
  content: $('#id') //這里content是一個(gè)DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對(duì)元素所影響
});
//Ajax獲取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe層
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //這里content是一個(gè)URL，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open執(zhí)行tips層
 */
layer.open({
  type: 4,
  content: ['內(nèi)容', '#id'] //數(shù)組第二項(xiàng)即吸附元素選擇器或者DOM
});

success - 層彈出后的成功回調(diào)方法

當(dāng)你需要在層創(chuàng)建完畢時(shí)即執(zhí)行一些語(yǔ)句，可以通過(guò)該回調(diào)。success會(huì)攜帶兩個(gè)參數(shù)，分別是當(dāng)前層DOM當(dāng)前層索引。

layer.open({
  content: '測(cè)試回調(diào)',
  success: function(layero, index){
    console.log(layero, index);
  }
});

yes - 確定按鈕回調(diào)方法

該回調(diào)攜帶兩個(gè)參數(shù)，分別為當(dāng)前層索引、當(dāng)前層DOM對(duì)象。

layer.open({
  content: '測(cè)試回調(diào)',
  yes: function(index, layero){
    //do something
    layer.close(index); //如果設(shè)定了yes回調(diào)，需進(jìn)行手工關(guān)閉
  }
});

二、js操作父頁(yè)面常用代碼

// 1、訪問(wèn)父頁(yè)面元素值
parent.$("#id").val();

// 2、訪問(wèn)父頁(yè)面方法
parent.getMethodValue();//訪問(wèn)父頁(yè)面方法

// 3、如何關(guān)閉彈出的子頁(yè)面窗口
var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引
parent.layer.close(index);//關(guān)閉彈出的子頁(yè)面窗口

// 4、如何從子頁(yè)面執(zhí)行刷新父頁(yè)面操作
parent.location.reload();

三、子頁(yè)面改變父頁(yè)面內(nèi)容代碼實(shí)例

父頁(yè)面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父頁(yè)面</title>
    <link rel="stylesheet" type="text/css" href="layer.css" rel="external nofollow"  rel="external nofollow" >
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="layer.js"></script>
</head>
<body>
    <p id="parentIframe">實(shí)例</p>
    <button id="ne1">查看變量</button>
    <button id="ne">打開(kāi)iframe</button>
    <script type="text/javascript">
        var rel="原始變量";
        $(function(){
            $('#ne').on('click', function(){
                layer.open({
                    type: 2,
                    area: ['500px', '300px'],
                    maxmin: true,
                    content: 'test.html'
                });
            });
            $('#ne1').on('click', function(){
                alert(rel);
            });
        });
        function setRel(rel){
            this.rel=rel;
        }
        function getRel(){
            return rel;
        }
    </script>
</body>
</html>

子頁(yè)面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子頁(yè)面</title>
  <link rel="stylesheet" type="text/css" href="layer.css" rel="external nofollow"  rel="external nofollow" >
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="layer.js"></script>
</head>
<body>
  <p><input id="name"><button id="new1">改變父類(lèi)元素</button></p> 
  <button id="new">關(guān)閉iframe</button>
  <script>
    $(function(){
      var str=window.location.href;
      $("#name").val(str.split('?')[1]);
      $('#new').on('click', function(){
        var index = parent.layer.getFrameIndex(window.name); 
        parent.setRel("子類(lèi)傳值");
        parent.layer.close(index);
 
      });
      $('#new1').on('click', function(){
        parent.$('#parentIframe').text($("#name").val());
      });
    });
  </script>
</body>
</html>

注意：

1、父頁(yè)面中的‘test.html’改成自己的子頁(yè)面路徑地址

2、官方下載layer.js

3、jquery庫(kù)的引用必須在layer.js之前

到此這篇關(guān)于layui.layer彈出層(子頁(yè)面)改變父頁(yè)面內(nèi)容（訪問(wèn)元素和函數(shù)）的文章就介紹到這了,更多相關(guān)layer子頁(yè)面訪問(wèn)父頁(yè)面的元素和函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: