1.正常配置菜单,在vue页面使用iframe进行嵌套加载其它系统的页面,已加载百度为例
<template>
<div id="app">
<iframe
style="border:none"
:width="searchTableWidth"
:height="searchTableHeight"
v-bind:src="reportUrl"
></iframe>
</div>
</template>
<script>
import Vue from 'vue'
export default {
methods: {
widthHeight() {
this.searchTableHeight = window.innerHeight -180;
this.searchTableWidth = window.innerWidth - 230
},
},
data() {
return {
reportUrl: 'https://www.baidu.com/',
searchTableHeight: 0,
searchTableWidth: 0
}
},
mounted() {
window.onresize = () => {
this.widthHeight(); // 自适应高宽度
};
this.$nextTick(function () {
this.widthHeight();
});
},
created() {
// 从路由里动态获取 url地址 具体地址看libs下util.js里的 backendMenuToRoute 方法
this.reportUrl = 'https://www.baidu.com/'
},
watch: {
'$route': function () {
// 监听路由变化
this.reportUrl = 'https://www.baidu.com/'
}
}
}
</script>
效果图:
2.加载引入系统可能会出现拦截,xxx 拒绝了我们的连接请求。前端页面Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'sameorigin',对于这个问题我们需要在引入的项目中进行拦截处理,引入项目中response.addHeader("x-frame-options","SAMEORIGIN")需要改写为response.addHeader("x-frame-options","ALLOW-FROM http://127.0.0.1:项目端口/");对访问方式进行允许iframe不同域名之间进行调动
3.引入项目的后台拦截代码
@Configuration
public class MvcConfig implements WebMvcConfigurer {
//配置日志
private static final Logger logger= LoggerFactory.getLogger(MvcConfig.class);
@Autowired
SystemConfig systemConfig;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new HandlerInterceptor() {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//设置日志级别
//logger.debug("前置方法被执行");
return true;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
//logger.info("后置方法被执行");
//System.out.println(systemConfig.getMqiUrl());
if(null == modelAndView){
return;
}
response.addHeader("x-frame-options","ALLOW-FROM http://127.0.0.1:8004/");
modelAndView.getModelMap().addAttribute("arcgisserviceUrl", systemConfig.getArcgisserviceUrl());
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
//logger.debug("最终方法被执行");
}
});
}
}