ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

layui 如果调用 from 内嵌入的 iframe子页面方法

2021-02-23 16:33:50  阅读:12  来源: 互联网

标签:layuiadmin form layui 表单 base iframe var 页面


(人笨,占时想法的办法,不要骂,不要骂,怕了怕了)

父页面;

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title><!-- keep on record  备案 --></title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" href="<%=basePath %>base/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath %>base/layuiadmin/style/admin.css" media="all">
    
  </head>
<body> 
    <div class="layui-fluid"><!-- 布局容器 -->
        <div class="layui-row layui-col-space15"> <!-- 列间距 -->
            <div class="layui-col-md12"><!-- 列元素 -->
                <div class="layui-card"><!-- 卡片面板 --> 
                    <div class="layui-card-body" style="padding: 15px;">
                        <form class="layui-form" action="" lay-filter="keep-on-record">
                            
                            <div class="layui-collapse">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">提交资料自检</h2>
                                     <div class="layui-colla-content layui-show">
                                        <iframe  name="receiving" lay-filter="receiving" id="receiving" src="projects/Post_certificate/Head.jsp?id=<%=id %>" style="width: 100%; height: 86%;"></iframe>
                                    </div>
                                </div>
                            </div> 
                            <div class="layui-form-item layui-layout-admin">
                                <div class="layui-input-block">
                                    <div class="layui-footer"  style="left: 0;"> 
                                        <button type="button" class="layui-btn" id="save">保存</button>     
                                        <button type="reset" class="layui-btn layui-btn-primary" id='close'>关闭</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


<script src="<%=basePath %>base/layuiadmin/layui/layui.js"></script> 
</body>
  <script>
  // 当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form,并且执行一个实例
  layui.use(['form','laydate','element'], function(){
      var $ = layui.$;
      var form = layui.form //只有执行了这一步,部分表单元素才会自动修饰成功
      ,element = layui.element
      ,laydate = layui.laydate
      ,layer = layui.layer
      ,layero = layui.layero; 
      
      
      $('#save').click(function(){    
          console.log("----");
          var childWindow = $("#receiving")[0].contentWindow;
          childWindow.bridging();  
        /* 调用 Head.jsp 下的  bridging (), 
此方法是外部方法,还需在 Head.jsp 下编写方法 调用 layui.use() 内的方法 ,
因为 需要获得 Head.jsp 内的表单数据,
也可以在 Head.jsp 外部的方法获得表单 数据*/
      });
  
});
  </script>
</html>

子页面:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 

%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title><!--   --></title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" href="<%=basePath %>base/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath %>base/layuiadmin/style/admin.css" media="all">
    
  </head>
<body> 
<form class="layui-form" action="" lay-filter="header-information">
    <!-- 吧啦吧啦 的 表单内容 -->
</form> 
<script src="<%=basePath %>base/layuiadmin/layui/layui.js"></script> 
</body>
  <script>
  // 当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form,并且执行一个实例
  layui.use(['form','element'], function(){
      var $ = layui.$;
  var form = layui.form //只有执行了这一步,部分表单元素才会自动修饰成功
  ,element = layui.element;
   
  window.head2 = function () {  // 写一个全局方法
      console.log("进入内部");
  };  
  
  function head(){
        //获取表单区域所有值
        var data = form.val("header-information"); 
        console.log(data);
      }
  
}); 
  function bridging(){
      //console.log("--------------");
      head2(); // 调用全局方法
  }

  </script>
</html>

 

标签:layuiadmin,form,layui,表单,base,iframe,var,页面
来源: https://www.cnblogs.com/mysterious-killer/p/14436755.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有