layui.layer弹出层(子页面)改变父页面内容（访问元素和函数）

2023-03-23 我要评论

当前页面（父框架或父页面）使用layer以iframe层的方式弹出新的窗口（子框架或子页面）时，如何在子页面中访问父页面的元素和函数，从而改变父元素的页面显示，给用户合理舒适的体验。

一、layer.open() 方法重要参数使用回顾

content - 内容

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

success - 层弹出后的成功回调方法

当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。

layer.open({
  content: '测试回调',
  success: function(layero, index){
    console.log(layero, index);
  }
});

yes - 确定按钮回调方法

该回调携带两个参数，分别为当前层索引、当前层DOM对象。

layer.open({
  content: '测试回调',
  yes: function(index, layero){
    //do something
    layer.close(index); //如果设定了yes回调，需进行手工关闭
  }
});

二、js操作父页面常用代码

// 1、访问父页面元素值
parent.$("#id").val();

// 2、访问父页面方法
parent.getMethodValue();//访问父页面方法

// 3、如何关闭弹出的子页面窗口
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);//关闭弹出的子页面窗口

// 4、如何从子页面执行刷新父页面操作
parent.location.reload();

三、子页面改变父页面内容代码实例

父页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</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">实例</p>
    <button id="ne1">查看变量</button>
    <button id="ne">打开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>

子页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子页面</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">改变父类元素</button></p> 
  <button id="new">关闭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("子类传值");
        parent.layer.close(index);
 
      });
      $('#new1').on('click', function(){
        parent.$('#parentIframe').text($("#name").val());
      });
    });
  </script>
</body>
</html>

注意：

1、父页面中的‘test.html’改成自己的子页面路径地址

2、官方下载layer.js

3、jquery库的引用必须在layer.js之前

到此这篇关于layui.layer弹出层(子页面)改变父页面内容（访问元素和函数）的文章就介绍到这了,更多相关layer子页面访问父页面的元素和函数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！