layer框架，子框架改变父框架内容

最新推荐文章于 2024-06-17 09:47:08 发布

chengchengbox

最新推荐文章于 2024-06-17 09:47:08 发布

阅读量339

点赞数

分类专栏： html layer 文章标签： layer

本文链接：https://blog.csdn.net/qq_34297991/article/details/103928075

版权

html 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

layer

3 篇文章 0 订阅

订阅专栏

父框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="layer/mobile/need/layer.css">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript" src="layer/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: 'indexb.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>Document</title>
  <link rel="stylesheet" type="text/css" href="layer/skin/layer.css">
</head>
<body>
  <p><input id="name"><button id="new1">改变父类元素</button></p> 
  <button id="new">关闭iframe</button>

  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script type="text/javascript" src="layer/layer.js"></script>
  <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、父框架中的‘indexb.html’改成自己的子框架地址

2、必须在服务器中打开，本地服务器也可以。http://localhost/

3、官方下载layer.js

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

否者就会出现莫名其妙的错误，比如：layer.open is not a function

下载案例地址：https://download.csdn.net/download/qq_34297991/12097003

chengchengbox

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layer框架，子框架改变父框架内容

父框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="layer/mobil...
复制链接

扫一扫

专栏目录