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

以你之姓@ 2023-10-05 03:57 12阅读 0赞

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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70][]

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不同域名之间进行调动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1][]

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("最终方法被执行");  
\}  
\});  
\}  
\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201223172516471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201223172949936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70