本篇内容主要讲解“vue项目怎么通过url链接引入其他系统页面”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue项目怎么通过url链接引入其他系统页面”吧!
在vue页面使用iframe进行嵌套加载其它系统的页面，已加载百度为例
计算
安全
数据库
网络和加速
企业服务
<template>
<div id="app">
<iframe
: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>效果图：
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不同域名之间进行调动
@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("最终方法被执行");
}
});
}
}我的需求是一进入页面通过调接口获取页面的url，然后把url嵌套到当前页面。
<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>到此，相信大家对“vue项目怎么通过url链接引入其他系统页面”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/ZHANGLIZENG/article/details/111594763
