vue项目通过url链接引入其他系统页面

1.正常配置菜单，在vue页面使用iframe进行嵌套加载其它系统的页面，已加载百度为例

<template><div id="app"><iframestyle="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("最终方法被执行");
}
});
}
}

vue项目通过url链接引入其他系统页面相关推荐

vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
vue项目中使用vant时tabbar遮挡页面解决方法
标题vue项目中使用Vant时tabbar遮挡页面解决方法单页面使用: 页面底部可以增加一个div,<div style="height: 5rem;"></d ...
使用nw.js将vue项目打包为可在xp系统运行的桌面程序
前情提要在nw.js入门最如丝般润滑的教程一文中,作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe. 看vuecli创建的工程打包成exe文件可直接从[ ...
vue项目添加全局水印或某个指定页面水印源码
vue项目的页面添加水印,效果如图 index.vue import watermark from "./watermark"; mounted() {watermark.set( ...
vue项目在ie、360兼容模式页面显示空白问题
vue项目中,出现在ie与360兼容模式下打开页面呈现空白问题,如下: 控制台报main.js中语法错误~ 上网搜了一下,大部分解决方案是在webpack配置中与main.js中引入babel-pol ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
vue项目中，用iframe嵌套其他页面在IE浏览器打开空白而在谷歌打开正常的问题
问题在vue项目中,某个页面里面用iframe嵌套了另一个vue项目的一个页面,在谷歌浏览器中打开,iframe的内容正常显示:在ie浏览器中打开,iframe的内容是空白的,没有报错. 原因用的 ...
Vue项目实战07：引入Normalize.css样式初始化
Normalize.css简介我们在开发的时候会发现很多样式都自带了各自特有的默认样式,而这样样式通常会被遗忘,导致样式调整起来很繁琐.为了让样式统一,我们在开发的时候通常会对一些元素进行样式重置, ...
vue点击url链接下载文件
在src下面新建一个downLoadUrl的目录 downLoadUrl / index.js文件 /** 后端返回文件的url,前端创建a标签来下载** 1. 解决了若文件为图片或浏览器支持的格式类 ...

vue项目通过url链接引入其他系统页面

vue项目通过url链接引入其他系统页面相关推荐

最新文章

热门文章