页面嵌套iframe

最新推荐文章于 2024-07-24 15:57:13 发布

Youuuuuuuu

最新推荐文章于 2024-07-24 15:57:13 发布

阅读量4.5k

点赞数

分类专栏：页面处理文章标签： iframe嵌套

本文链接：https://blog.csdn.net/befroe_You/article/details/78657479

版权

页面处理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、使用场景：

 
 项目中带调用其他项目接口，iframe嵌套 对方接口数据页面，所以将iframe嵌套在本项目的页面，当接口返回数据，页面的标题，头部，和尾部依旧是本项目的，数据是调用接口的数据。 

  二、优点： 

 
  
 1、这是第一次写，直接访问接口，不用自己处理逻辑与数据，只管调取。 

 
 2、数据库不需要创建所有的相关表来存储数据。 

 
 三、嵌套思路： 

 
 数据访问成功，通过Controller传参数到嵌套页面 

 
 四：具体步骤 

1、js接口返回数据正常，跳转Controller跳页 
  if(date.sucess==true){ 
 
  window.location.href="./toOrderQuery.htm?key="+key; 
 
  } 
 
  2、 
  controller传参数到带有iframe的页面 
 
    /** 
  
    * 风险查询页 
  
    */ 
  
   @RequestMapping("toOrderQuery.htm") 
  
   public String orderQuery(HttpSession session,ModelMap map,String key){ 
  
   riskSearchService.orderQuery(session,map,key); 
  
   return "ssl/riskSearch/iframeYsdt"; 
  
   } 
  
    Service 参数处理 
   
     @Override 
   
    public Map<String, Object> orderQuery(HttpSession session, ModelMap map, 
   
    String key) { 
   
    String iframeUrl = orderUrl+"?key="+key; 
   
    map.put("iframeUrl", iframeUrl); 
   
    return map; 
   
    } 
   
     3、Jsp 中使用 
     <%String url = (String)request.getAttribute("iframeUrl");%>来 获取到的iframeUrl，iframeUrl的值为字符串的访问路径 
    
     ， 
     在iframe直接将路径赋值到src（用src="<%url%>"） 
    
      注意： 
     
      1)orderUrl是通过参数注入进来的，在项目中添加web-ysdt.properties 文件 
     
      web-ysdt.properties文件配置如下： 
     
       ysdt.url=${ysdt.url} 
     
       ysdt.orderUrl=${ysdt.orderUrl} 
     
       ysdt.account=${ysdt.account} 
     
       ysdt.accountToKen=${ysdt.accountToKen} 
     
      在pom.xml文件中配置路劲参数如下： 
     
       <profiles> 
     
       <profile> 
     
       <properties> 
     
       <ysdt.url>http://app.zhongjincloud.com:21002/ysdt-web/ssl/external/queryRiskInfo.htm</ysdt.url> 
     
       <ysdt.orderUrl>http://app.zhongjincloud.com:21002/ysdt-web/external/order/toOrderChart.htm</ysdt.orderUrl> 
     
       <ysdt.account>18846161556</ysdt.account> <ysdt.accountToKen>bTk2M20yMm1jNDlteWdkY29rbWU0NDI3NjhkODBlYTdiMzQ4NzYw1510731393293</ysdt.accountToKen> 
     
       </properties> 
     
       </profile> 
     
       </profiles> 
     
      在service中使用如下： 
     
      @Value("${ysdt.orderUrl}") 
     
      private String orderUrl;//订单查询路径 
     
 页面如下： 
    
       <%@ page language="java" contentType="text/html; charset=UTF-8" 
     
       pageEncoding="UTF-8"%> 
     
       <% 
     
       String path = request.getContextPath(); 
     
       %> 
     
      <% 
     
      String url = (String)request.getAttribute("iframeUrl"); 
     
      %> 
     
       <!DOCTYPE html> 
     
       <html> 
     
       <head> 
     
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
     
       <meta name="renderer" content="webkit"> 
     
       <meta name="Keywords" Content=""> 
     
       <meta name="Description" Content=""> 
     
       <link rel="shortcut icon" href="<%=path%>/resources/images/favicon.ico" type="image/x-icon" /> 
     
       <link type="text/css" rel="stylesheet" href="<%=path%>/resources/css/css.css" /> 
     
       <script type="text/javascript" src="<%=path%>/resources/js/jquery-1.10.2.min.js"></script> 
     
       <script type="text/javascript" src="<%=path%>/resources/js/main.js"></script> 
     
       <title>海贝岛－产业金融信息服务平台</title> 
     
       </head> 
     
       <body style="background:#f2f2f2;" > 
     
       <div> 
     
       <div ><jsp:include page="../header.jsp" /></div> 
      //头部 
     
       <div class="w1200 tcenter" > 
     
      <iframe id="iframe1"  
      src="<%=url%>"  
      width="100%" height="1500px" style="margin-top:120px" frameborder="no" border="0" ></iframe> 
     
       </div> 
     
       <jsp:include page="../footer.jsp" /> 
       //尾部 
     
       </div> 
     
       </body> 
     
       </html>