通过iframe打开Layer弹出层，动态生成html页面元素并调用子页面js方法，在其中调用父页面js中的json变量...

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

weixin_33893473

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

阅读量492

点赞数

文章标签： json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000009337802

版权

关键点：
1 window.iframeMap = data.iframeMap;
把js方法中的局部变量转变成父页面的全局变量。
2 window.iframeWin = windowlayero.find('iframe')[0];
这里的iframeWin指向的是子页面。得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
3 onClick="window.parent.iframeWin.initIframeMap(window.parent.iframeMap['"+i+"']);"
如果是要在父页面的js中调用子页面的js方法initIframeMap ，直接使用iframeWin.initIframeMap 就可以了，参数也能直接传递过去。

父页面layerIframeTest.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>父页面</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="layui/layui.js"></script>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->
<a href="#" class="getSubPage">查看</a>

<script>
$('body').on('click', '.getSubPage', function(){
       layui.use('layer', function(){
             var layer = layui.layer;
             layer.open({
                      type: 2,
                      shade : 0.3,
                      area : ['70%','88%'],
                      title : 'iframe页面标题',
                      content: ['subPage.html'],
                      success: function (layero, index) {
                          var body = layer.getChildFrame('body', index); //LAYER对象下的方法，获取子iframe中的DOM
                          window.iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                          var data ="{\"iframeMap\":[";


                          data += "{\"iframeContent\":\"iframe页面\",";
                          data +="\"iframeSubMap\":[";
                          data += "{\"iframeSubContent\":\"iframe页面弹窗内容\"}";

                          data += "]}";
                          data += "]}";
                          //data = eval('('+data+')');
                          //data = $.parseJSON(data);
                          data = JSON.parse(data);
                          if (data.iframeMap != undefined) {
                                 var html = "";
                                 window.iframeMap = data.iframeMap;
                                 for(var i in data.iframeMap){
                                       iframePage = data.iframeMap[i];
                                       html += "<tr>";
                                       html += "<td style=\"cursor:pointer; color:blue;\" onClick=\"window.parent.iframeWin.initIframeMap(window.parent.iframeMap['"+i+"']);\">"+iframePage.iframeContent+"内容</td>";
                                       html += "</tr>";
                                 }
                                 body.contents().find("#iframeTbody").html(html);

                          }
                      }
             });
       });
});
</script>


</body>
</html>

子页面subPage.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>iframe页面</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->
<script type="text/javascript" src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" media="all">

</head>
<body>

       <div class="layui-tab-content larry-personal-body clearfix">


         <table>
           <tbody id="iframeTbody">
              <tr>
                    <td>无数据</td>
              </tr>
           </tbody>
         </table>

       </div>


<script type="text/javascript">

function initIframeMap(iframeMap) {
       var iframeSubMap = iframeMap.iframeSubMap;
       var html = '';
       if(iframeSubMap.length == 0){
             html += "<div align='center'>无数据</div>";
       }else{
             for(var i in iframeSubMap){
                    var iframeSubPage = iframeSubMap[i];
                    html += "<div>"+iframeSubPage.iframeSubContent+"</div>";
             }
       }
       layui.use('layer', function(){
              var layer = layui.layer;
              layer.open({
                      type: 1,
                      shade : 0.3,
                      area : ['70%','88%'],
                      title : iframeMap.iframeContent + "弹窗标题",
                      content: html
              });
       });
}
</script>
</body>
</html>

weixin_33893473

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫