vue通过url链接引入其他系统页面
1.正常配置菜单
在vue页面使用iframe进行嵌套加载其它系统的页面，已加载百度为例
<template>
<div >
<iframe
style="border:none"
:width="searchTableWidth"
:height="searchTableHeight"
v-bind:
></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("最终方法被执行");
}
});
}
}vue页面嵌套外部url
我的需求是一进入页面通过调接口获取页面的url，然后把url嵌套到当前页面。
<template>
<div class="page-content" ></div>
</template>
<script>
import reportFORMapi from '@/api/reportForm'
export default {
name: 'reportComponent',
props:{
codeStr:String
},
data () {
return {
urlCode :"",
}
},
mounted: function () {
if(this.codeStr){
this.urlCode = this.codeStr;
this.getUrl();
}
},
methods: {
getUrl(){
reportFormApi.getQuickBi({url : "/postUrl/" + this.urlCode}).then(res=>{
if(res.code==0){
var frame = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="100%" ></iframe>';
var newnode = document.createElement('div');
newNode.innerhtml = frame;
newNode.style.height = '1200px';
var htmlBody = document.getElementById('bi-div');
htmlBody.insertBefore(newNode, htmlBody.firstChild);
}else{
this.$Message.error({
content: res.message,
duration: 2.5,
closable:true,
});
}
})
}
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。