vue項(xiàng)目如何通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面
vue通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面
1.正常配置菜單
在vue頁(yè)面使用iframe進(jìn)行嵌套加載其它系統(tǒng)的頁(yè)面,已加載百度為例
<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(); // 自適應(yīng)高寬度 }; this.$nextTick(function () { this.widthHeight(); }); }, created() { // 從路由里動(dòng)態(tài)獲取 url地址 具體地址看libs下util.js里的 backendMenuToRoute 方法 this.reportUrl = 'https://www.baidu.com/' }, watch: { '$route': function () { // 監(jiān)聽路由變化 this.reportUrl = 'https://www.baidu.com/' } } } </script>
效果圖:
2.加載引入系統(tǒng)可能會(huì)出現(xiàn)攔截
xxx 拒絕了我們的連接請(qǐng)求。
前端頁(yè)面Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'sameorigin',對(duì)于這個(gè)問(wèn)題我們需要在引入的項(xiàng)目中進(jìn)行攔截處理,引入項(xiàng)目中response.addHeader("x-frame-options","SAMEORIGIN")需要改寫為response.addHeader("x-frame-options","ALLOW-FROM http://127.0.0.1:項(xiàng)目端口/");對(duì)訪問(wèn)方式進(jìn)行允許iframe不同域名之間進(jìn)行調(diào)動(dòng)
3.引入項(xiàng)目的后臺(tái)攔截代碼
@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 { ? ? ? ? ? ? ? ? //設(shè)置日志級(jí)別 ? ? ? ? ? ? ? ? //logger.debug("前置方法被執(zhí)行"); ? ? ? ? ? ? ? ? return true; ? ? ? ? ? ? } ? ? ? ? ? ? ? @Override ? ? ? ? ? ? public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception { ? ? ? ? ? ? ? ? //logger.info("后置方法被執(zhí)行"); ? ? ? ? ? ? ? ? //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("最終方法被執(zhí)行"); ? ? ? ? ? ? } ? ? ? ? }); ? ? } }
vue頁(yè)面嵌套外部url
我的需求是一進(jìn)入頁(yè)面通過(guò)調(diào)接口獲取頁(yè)面的url,然后把url嵌套到當(dāng)前頁(yè)面。
<template> <div class="page-content" id="bi-div"></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%" src="' + res.data.previewUrl + '"></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>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuex實(shí)現(xiàn)登錄狀態(tài)的存儲(chǔ),未登錄狀態(tài)不允許瀏覽的方法
下面小編就為大家分享一篇vuex實(shí)現(xiàn)登錄狀態(tài)的存儲(chǔ),未登錄狀態(tài)不允許瀏覽的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo
這篇文章主要為大家介紹了解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-06-06vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式
這篇文章主要介紹了vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue初始化項(xiàng)目時(shí)報(bào)錯(cuò):Error:Cannot find module vue-temp
這篇文章主要介紹了vue初始化項(xiàng)目時(shí)報(bào)錯(cuò):Error:Cannot find module vue-template-compiler問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)
kkFileView是git的開源在線文件預(yù)覽項(xiàng)目,這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線預(yù)覽功能,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼
本篇文章主要介紹了Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05