jsp iframe example

1. jsp中用iframe的方式在body中展示列表， 可以通过父元素的宽、高来设定iframe的宽高。

<div class="wrapper" style="height:100%">
      <iframe src="${pageContext.request.contextPath }/finished_workorder.action" scrolling="no"   name="mainFrame" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe>

   </div>

2. (struts2)action处理完，返回一个jsp视图页面。

struts.xml 　　

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <constant name="struts.devMode" value="true" />

    <package name="default" namespace="" extends="struts-default">
            <default-action-ref name="default" />
         <action name="default" class="com.cdv.apolloagent.action.HomeAction" method="execute">
            <result name="success">/WEB-INF/jsp/index.jsp</result>
        </action>
        <action name="finished_workorder" class="com.cdv.apolloagent.action.WorkOrderAction" method="finished_workorder">
             <param name="pageNo">${pageNo}</param>
            <result name="success">/WEB-INF/jsp/finished_workorder.jsp</result>
        </action>
    </package>
</struts>

WorkOrderAction.java

public String finished_workorder(){//@RequestParam(required=false) Integer pageNo
        HttpServletRequest request = ServletActionContext.getRequest();
        String pNo = request.getParameter("pageNo");
        Integer pageNo = 1;
        if(pNo!=null)
            pageNo = Integer.parseInt(pNo);
        PageParameter page = new PageParameter();
        if(pageNo!=null && pageNo>1){
            page.setPageNo(pageNo);
        }
        List<Workorderlog> finishedWorkorderlogList = workorderlogService.selectFinishedWorkorderListPage(page);
        int totalCount = workorderlogService.countFinishedWorkorder();
        page.setTotalCount(totalCount);
        page.setTotalPage(totalCount%page.getPageSize()==0 ? totalCount/page.getPageSize() : totalCount/page.getPageSize()+1);
        request.setAttribute("finishedWorkorderlogList", finishedWorkorderlogList);
        request.setAttribute("page", page);
        return "success";
    }

finished_workorder.jsp

<%@ 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 + "/";

%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie ie7 lt-ie9 lt-ie8"        lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie ie8 lt-ie9"               lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="ie ie9"                      lang="en"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-ie">
<!--<![endif]-->

<head>
<!-- Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>已完成工单</title>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="<%=path %>/app/css/bootstrap.css">
<!-- Vendor CSS-->
<link rel="stylesheet" href="<%=path %>/vendor/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=path %>/vendor/animo/animate+animo.css">
<!--    <link rel="stylesheet" href="<%=path %>/vendor/csspinner/csspinner.min.css"> -->

<link rel="stylesheet" href="<%=path %>/vendor/datetimepicker/css/bootstrap-datetimepicker.min.css">

<!-- START Page Custom CSS-->
<!-- Data Table styles-->
<link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/ColVis/css/dataTables.colVis.css">
<!-- END Page Custom CSS-->
<!-- App CSS-->
<link rel="stylesheet" href="<%=path %>/app/css/app.css">
<link rel="stylesheet" href="<%=path %>/app/css/beadmin-theme-c2.css">
<link rel="stylesheet" href="<%=path %>/static/ztree/zTreeStyle.css" type="text/css">

<link rel="stylesheet" href="<%=path %>/vendor/my/jqpagination.css"/>
<link rel="stylesheet" href="<%=path %>/vendor/my/demo.css"/>
<!-- Modernizr JS Script-->
<script src="<%=path %>/vendor/modernizr/modernizr.js" type="application/javascript"></script>
<!-- FastClick for mobiles-->
<script src="<%=path %>/vendor/fastclick/fastclick.js" type="application/javascript"></script>

</head>

<body>
<!-- START Main wrapper-->
<div class="wrapper">
  <!-- End aside--> 

  <!-- START Main section-->
  <section>
    <!-- START Page content-->
    <div class="content-wrapper">
      <h3>工单列表
<!--       <div style="float:right; margin-top:5px;" class="form-group">
                  <button type="button"  onclick="$(‘#myModal‘).modal({backdrop: ‘static‘, keyboard: false});;" class="btn btn-labeled btn-info"> <span class="btn-label"><i class="fa fa-plus"></i> </span>导入EPG</button>
                </div> -->
              <small>已完成工单表</small>
      </h3>

      <!-- START panel--> 

      <!-- START DATATABLE 3-->
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading" style="border-bottom:1px solid #eee;">
             <!--  <form class="form-inline">
                <div class="form-group"> <b>时间: &nbsp;</b>
                  <div class="datetimepicker input-group date mb-lg" data-pick-time="false">
                    <input type="text" class="form-control">
                    <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div>
                  <span style="margin-top:-8px;">—</span>
                  <div class="datetimepicker input-group date mb-lg" data-pick-time="false">
                    <input type="text" class="form-control">
                    <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div>
                </div>
                <div class="form-group">
                                <b>名称:&nbsp;</b>
                                <input type="text" class="form-control mb-lg">
                            </div>
                <div class="form-group">
                                <b>频道:&nbsp;</b>
                                 <select class="form-control mb-lg" name="account">
                                         <option>全部</option>
                                         <option>CCTV</option>
                                         <option>CCTV经济</option>
                                         <option>CCTV体育</option>
                                      </select>
                            </div>
                <div class="form-group">
                                <b>节目源:&nbsp;</b>
                                 <select class="form-control mb-lg" name="account">
                                         <option>全部</option>
                                         <option>CCTV</option>
                                         <option>CCTV经济</option>
                                         <option>CCTV体育</option>
                                      </select>
                            </div>
                <div class="form-group"> <a style="margin:-10px 0 0 5px; float:left;" href="#" class="mb-sm btn btn-primary" type="button">搜索</a> </div>

              </form> -->
            </div>
            <div class="table-responsive">
              <table class="table table-bordered table-hover dataTable no-footer" id="table-ext-1" >
                <thead>
                  <tr>
                    <th>工单ID</th>
                    <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 286px;" aria-label="Rendering engine: activate to sort column ascending">Correlate ID</th>
                    <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">创建时间</th>
                    <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">发布时间</th>
                    <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">错误信息</th>
                    <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">结果文件URL</th>
                    <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">错误码</th>
                    <th>回调状态</th>
                    <th class="th200">工单文档</th>
               <%--      <th class="check-all th80"> <div class="checkbox c-checkbox" data-title="Check All" data-toggle="tooltip" data-original-title="" title="">
                        <label>
                          <input type="checkbox">
                          <span class="fa fa-check"></span> </label>
                      </div>
                    </th> --%>
                  </tr>
                </thead>
                <tbody>
                <s:iterator value="#attr.finishedWorkorderlogList" id="finishedWorkorderlog">
                  <tr class="gradeX">
                    <td><s:property value="workorderid"/></td>
                    <td><s:property value="correlateid"/></td>
                    <td><s:property value="createtime"/></td>
                    <td><s:property value="publictime"/></td>
                    <td><s:property value="errorinfo"/></td>
                    <td><s:property value="resultFileURL"/></td>
                    <td><s:property value="errorcode"/></td>
                    <td><s:property value="feedbackflag"/></td>
                    <td class="detail" workorderid=‘<s:property value="workorderid"/>‘ ><a style="margin:-10px 0 0 5px; float:left;" href="#" class="mb-sm btn btn-primary" type="button">查看detail</a></td>
                <%--     <td><div class="checkbox c-checkbox">
                        <label>
                          <input type="checkbox">
                          <span class="fa fa-check"></span> </label>
                      </div></td> --%>
                  </tr>
              </s:iterator>  

                </tbody>
                <tfoot>
                  <tr> </tr>
                </tfoot>
              </table>
            </div>
            <div class="panel-footer">
                 <div class="row">
                  <div id="my_pagination" class="gigantic pagination">
                      <a href="#" class="first" data-action="first">&laquo;</a>
                      <a href="#" class="previous" data-action="previous">&lsaquo;</a>
                      <input type="text" readonly="readonly" data-max-page="40" />
                      <a href="#" class="next" data-action="next">&rsaquo;</a>
                      <a href="#" class="last" data-action="last">&raquo;</a>
                    </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- END DATATABLE 3--> 

    </div>
    <!-- END Page content-->
  </section>
  <!-- END Main section-->
</div>
<!-- END Main wrapper-->
<div id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" style="top:100px">
  <div class="modal-dialog" style="width:600px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
        <h4 id="myModalLabel" class="modal-title">工单文档内容</h4>
      </div>
      <div class="modal-body" id="workorder_detail">

      </div>
      <div class="modal-footer">
        <button id="myModal3_close" type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
        <button id="myModal3_sure" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
    <form method="post" id="pageForm" name="pageForm"
        action="<%=path%>/finished_workorder.action">
        <input input="hidden" id="pageNo" name="pageNo" value="${page.pageNo }" />
    </form>
<!-- END modal--> 

<!-- START Scripts-->
<!-- Main vendor Scripts-->
<script src="<%=path %>/vendor/jquery/jquery.min.js"></script>
<script src="<%=path %>/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugins-->
<script src="<%=path %>/vendor/chosen/chosen.jquery.min.js"></script>
<script src="<%=path %>/vendor/slider/js/bootstrap-slider.js"></script>
<script src="<%=path %>/vendor/filestyle/bootstrap-filestyle.min.js"></script>
<!-- Animo-->
<script src="<%=path %>/vendor/animo/animo.min.js"></script>
<!-- Sparklines-->
<script src="<%=path %>/vendor/sparklines/jquery.sparkline.min.js"></script> 

<!-- MomentJs and Datepicker-->
<script src="<%=path %>/vendor/moment/min/moment-with-langs.min.js"></script>
<script src="<%=path %>/vendor/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> 

<!-- Slimscroll-->
<script src="<%=path %>/vendor/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Store + JSON-->
<script src="<%=path %>/vendor/store/store+json2.min.js"></script>
<!-- ScreenFull-->
<script src="<%=path %>/vendor/screenfull/screenfull.min.js"></script>
<!-- START Page Custom Script-->
<!-- Data Table Scripts-->
<script src="<%=path %>/vendor/datatable/media/js/jquery.dataTables.min.js"></script>
<script src="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrap.js"></script>
<script src="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrapPagination.js"></script>
<script src="<%=path %>/vendor/datatable/extensions/ColVis/js/dataTables.colVis.min.js"></script>
<!-- START Page Custom Script-->
<script src="<%=path %>/vendor/wizard/js/bwizard.min.js"></script>
<!-- Form Validation-->
<script src="<%=path %>/vendor/parsley/parsley.min.js"></script>
<!-- END Page Custom Script-->
<!-- App Main-->
<script src="<%=path %>/app/js/app.js"></script>
<script src="<%=path %>/vendor/my/jquery.jqpagination.min.js"></script>
<script>
    var path = ‘<%=path %>‘;
    var pageNo = ${page.pageNo};
    var totalPage = ${page.totalPage};
    $(‘.pagination‘).jqPagination({
      link_string : path+‘/finished_workorder.action?pageNo={page_number}‘,
      current_page: pageNo, //设置当前页 默认为1
      max_page : totalPage, //设置最大页 默认为1
      page_string : ‘当前第{current_page}页,共{max_page}页‘,
      paged : function(page) {
          console.log(page);
          $("#pageNo").val(page);
          $("#pageForm").submit();
      }
    });

    $(‘.detail‘).each(function(){
        var $detail = $(this);
        var a = $detail.children("a")[0];
        var workorderid = $detail.attr("workorderid");

        $(a).click(function(){
            $.ajax({
                url : "",
                type : "POST",
                data : {
                    "workorderid" : workorderid
                },
                success : function(wkdetail){
                    $("#workorder_detail").text(wkdetail);
                    $("#myModal3").modal(‘show‘);
                }
            });

        });
        $("#myModal3_close").click(function(){
            $("#myModal3").modal(‘hide‘);
            $("#workorder_detail").html(‘‘);
        });
        $("#myModal3_sure").click(function(){
            $("#myModal3").modal(‘hide‘);
            $("#workorder_detail").html(‘‘);
        });
    });

</script>
<!--
    $(‘.detail‘).each(function(){
        var $detail = $(this);
        var wk_string = $detail.attr("wkdetail");
        var sub_string = wk_string.substring(0,30);
        var a = $detail.children("a")[0];
        $(a).text(sub_string);
        $(a).click(function(){
            $("#workorder_detail").text(wk_string);
            $("#myModal3").modal(‘show‘);
        });
        $("#myModal3_close").click(function(){
            $("#myModal3").modal(‘hide‘);
            $("#workorder_detail").html(‘‘);
        });
    })
 -->
<!-- END Scripts-->
</body>
</html>
时间： 2024-10-05 18:31:05

jsp iframe example的相关文章

jsp+iframe+serverlet实现文件上传

实现文件上传我想大家也都会 这是jsp页面的代码 index.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.o

iframe是怎么跳转的

在main.jsp中 <iframe frameborder="0" marginheight="0" marginwidth="0" width="100%" height="74px" scrolling="no" src="${pageContext.request.contextPath}/jsp/admin/goods/top.jsp"><

jsp查询页面和结果页面在同一页面显示和交互

用frameset实现查询页面和结果页面在同一页面 用target实现交互显示在同一页面上 请参照以下方法解决: main.jsp: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Insert title here</title> </head> <body>

使用iframe标签结合springMvc做文件上传

1.iframe.jsp <body> <h1>测试iframe文件上传</h1> <!-- 1.要求表单的target属性名称与iframe的name名字一致 2.iframe自身特性 1).iframe标签所在的页面称之parent(父)页面 2).iframe标签所包含的页面称之为子页面 3.本测试的子页面是:controller跳转的页面,即是ok.jsp --> <iframe name="aaa" width="

struts2中用iframe遮罩frameset

项目中遇到的遮罩问题 ///////////////////////////////////index.jsp///////////////////////////////////////// <html><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri=&qu

HTML页面中直接加载其他JSP页面

1.在经典的框架中填充页面时 要填充2处的页面,2处为内容页面,是另外的一个JSP页面 2.左侧页面代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <script type="text/javascript"> var loadPage = function(pageName){ var basePath =

使用target打开的iframe 获取src的问题

<a target="mainframe"href="xxx.jsp"/> <iframe id="mainframe" name="mainframe"/> load之后 alert($("#mainframe").attr("src"));为什么总是获取不到那个 使用target的需要这样 $("#mainframe").load(func

在iframe子页面中添加导航功能代码

使用iframe嵌套页面,并在页面中添加导航功能,iframe只适应高度 效果图如下图 主页面 <div class="date_app" id="postRightContent" style="height: 725px; margin-bottom: 30px;"> <iframe id="rightIframePage" name="rightIframePage" scrolli

HTML+CSS之iframe

碎碎:这两天在实践中,用到了 iframe,之前对其不甚了解,了解之中遇到好多奇葩问题,今天记录下这两天遇到的相关的内容. 嵌入的 iframe 页面的边框 嵌入的 iframe 页面的背景 嵌入的 iframe 页面居中 嵌入的 iframe 页面的滚动条 iframe 父页面调用子页面 iframe 子页面调用父页面 1. iframe 嵌入页面的边框 //HTML 元素:主要有 src: 要嵌入的页面 <iframe id="framePage" src="ifr