iframe标签的使用以及刷新跨域url存在跨域问题的解决

2021-02-05  本文已影响0人  尘埃里的玄

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
上一篇下一篇

猜你喜欢

热点阅读