vue项⽬中加⼊html，如何在vue项⽬中嵌⼊jsp页⾯的⽅法（2
种）
今⽇⼀个项⽬中⼀块功能模块是其他系统使⽤jsp已经开发好的页⾯，想着直接将其嵌⼊到当前的vue项⽬中节约开发成本；但是发现并⾮想象的那么简单
创建⼀个server.vue组件加载jsp页⾯
1 、第⼀种(使⽤ v-html进⾏jsp 渲染)
server.vue
export default {
name: "server",
data(){
return{
pageContent:'',
}
},
created(){
},
methods:{
getDockerPage() {
// $post为全局的axios post请求对象；dockerMange 为后端ip
let url = `${api_config.dockerMange}/core/funcs/system/docker/server/index.jsp`;
this.$post(url).then(res => {
console.log(res);
this.pageContent = res.data;
}).catch(err => {
console.log(err)
});
}
}
}
请求返回的jsp数据格式
后台返回的 index.jsp 内容如下：
/** 常量定义 **/
var TDJSCONST = {
YES: 1,
NO: 0
};
/** 变量定义 **/
var contextPath = "/docker";
var imgPath = "/docker/core/styles/style1/img";
var ssoUrlGPower = "";
var limitUploadFiles = "jsp,java,jspx,exe"
var isOnlineEval = "0";
var useSearchFunc = "1";
var maxUploadSize = 500;
var isDev = "0";
var ostheme = "1";
Docker容器服务器管理
function doInit() {
var tabArray = [{
title: "容器服务器管理",
content: "",
contentUrl: "**/docker/core/funcs/system/docker/server/manage.jsp", imgUrl: "**" + imgPath + "/cmp/tab/sys_config.gif",
useIframe: true
},
title: "新增容器服务器",
content: "",
contentUrl: "**/docker/core/funcs/system/docker/server/edit.jsp",
imgUrl: "**" + imgPath + "/cmp/tab/sys_config.gif",
useIframe: true
}];
buildTab(tabArray, 'contentDiv');
}
页⾯显⽰如下：
因：jsp页⾯只是写了⼏个标签，其他数据都是通过外部js中的⽅法动态渲染出来的，然⽽使⽤v-html只是将jsp 页⾯加载到了当前页⾯上，但是没有将js 再次load进来；所以页⾯上就只有⼏个没有⽤的标签！最终确认这种⽅法不可⾏
2、 第⼆种(使⽤ iframe 进⾏jsp嵌⼊)
修改后的 server.vue
width="100%" :height="iframeHeight"
frameborder="0" scrolling="no" ref="iframeDom"
>
export default {
name: "server",
data(){
return{
iframeHeight:500,
getPageUrl:`${api_config.dockerMange}/core/funcs/system/docker/server/index.jsp?
MySessionId=${JSON.Item("userInfo")).userToken}`
iframe嵌套页面加载慢}
mounted: function () {
this.$nextTick(() => {
if(this.$refs.iframeDom)
this.iframeHeight = window.innerHeight - this.$refs.iframeDom.$el.offsetTop; })
},
}
这次终于对了运⾏效果如下：
还是⽼式的⽅法过的奥，测试证明这种⽅式可⾏，完美解决问题 嘿嘿。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。