美文网首页
iframe标签的使用以及刷新跨域url存在跨域问题的解决

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

作者: 尘埃里的玄 | 来源:发表于2021-02-05 10:15 被阅读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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/zvewtltx.html