ifram标签的代码:
<template>
<div v-loading="loading" :style="'height:'+ height">
<iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
@Component
export default class reportDesign extends Vue{
src: string = "/ureport/designer";
height: string = document.documentElement.clientHeight - 94.5 + "px;";
loading: boolean = true;
mounted(): void {
setTimeout(() => {
this.loading = false;
}, 230);
const that = this;
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 94.5 + "px;";
};
}
}
</script>
<style scoped>
</style>
刷新代码:
<div v-loading="loading" :style="'height:'+ height">
<!-- <iframe id="myFrame" name = "frameName" :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />-->
<p v-html="htmlText"></p>
</div>
image.png
image.png
造成了iframe跨域引用其他url造成拒绝访问的解决办法
解决方法:前端使用v-html标签
后台使用:
hutool的httpUtil工具类返回html文本
image.png
网友评论