页面嵌套iframe

时间 2019-12-05 标签页面嵌套 iframe

1、使用场景：javascript

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

2、优势：

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

二、数据库不须要建立全部的相关表来存储数据。

3、嵌套思路：

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

四：具体步骤

1、 js接口返回数据正常，跳转Controller跳页

if(date.sucess==true){

window.location.href="./toOrderQuery.htm?key="+key;

}

二、 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;

}

三、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文件中配置路劲参数以下：

<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>

<title>海贝岛－产业金融信息服务平台</title>

</head>

<div>

<div ><jsp:include page="../header.jsp" /></div> //头部

</div>

<jsp:include page="../footer.jsp" /> //尾部

</div>

</body>

</html>