首页 > 其他分享 >vue+iframe 添加请求头,自适应宽度和高度,iframe将token放在请求头不是src的url中

vue+iframe 添加请求头,自适应宽度和高度,iframe将token放在请求头不是src的url中

时间:2023-11-29 10:44:26浏览次数:38  
标签:vue iframe 请求 url xhr token myIframe

  1 <template>
  2   <div class="iframe">
  3     <iframe
  4       v-if="isRequestHeader"
  5       id="myIframe"
  6       name="myIframe"
  7       src=""
  8       frameborder="0"
  9       scrolling="no"
 10     />
 11     <iframe
 12       v-else
 13       id="myIframe"
 14       name="myIframe"
 15       :src="`${apiUrl}${url}`"
 16       frameborder="0"
 17       scrolling="no"
 18     />
 19   </div>
 20 </template>
 21 <script>
 22 import util from '@/utils/util'
 23 import { getToken } from '@/utils/token'
 24 export default {
 25   name: 'Iframe',
 26   props: {
 27     // 请求的URL
 28     url: {
 29       type: String,
 30       default: '',
 31       required: true
 32     },
 33     // 是否携带请求头(例如:token)
 34     isRequestHeader: {
 35       type: Boolean,
 36       default: false,
 37       required: false
 38     }
 39   },
 40   data () {
 41     return {
 42       apiUrl: util.apiUrl
 43     }
 44   },
 45   watch: {
 46     url: {
 47       handler: function (newVal, oldVal) {
 48         if (newVal && newVal !== oldVal) {
 49           this.$nextTick(() => {
 50             this.adaptWidthAndHeight()
 51           })
 52         }
 53       }
 54     }
 55   },
 56   created () {
 57     if (this.isRequestHeader) {
 58       setTimeout(() => {
 59         const myIframe = document.querySelector('#myIframe')
 60         this.populateIframe(myIframe, [['token', getToken()]])
 61       }, 0)
 62     }
 63   },
 64   mounted () {
 65     this.adaptWidthAndHeight()
 66   },
 67   methods: {
 68     /**
 69      * iframe-宽高自适应显示
 70      */
 71     adaptWidthAndHeight () {
 72       const myIframe = document.getElementById('myIframe')
 73       const deviceWidth = document.documentElement.clientWidth
 74       const deviceHeight = document.documentElement.clientHeight
 75       // 数字是页面布局宽度差值
 76       myIframe.style.width = (Number(deviceWidth) - 40) + 'px'
 77       // 数字是页面布局高度差
 78       myIframe.style.height = (Number(deviceHeight) - 164) + 'px'
 79     },
 80     /**
 81      * iframe 添加请求头
 82      */
 83     populateIframe (iframe, headers) {
 84       var xhr = new XMLHttpRequest()
 85       // `${this.apiUrl}${this.url}` 请求的URL
 86       xhr.open('GET', `${this.apiUrl}${this.url}`)
 87       xhr.responseType = 'blob'
 88       headers.forEach((header) => {
 89         xhr.setRequestHeader(header[0], header[1])
 90       })
 91       xhr.onreadystatechange = () => {
 92         if (xhr.readyState === xhr.DONE) {
 93           console.log('xhr.response', xhr.response)
 94           if (xhr.status === 200) {
 95             iframe.src = URL.createObjectURL(xhr.response)
 96           }
 97         }
 98       }
 99       xhr.send()
100     }
101   }
102 }
103 </script>
104 <style lang="scss" scoped>
105 .iframe {
106   width: 100%;
107   height: 100%;
108 }
109 </style>

参考链接 https://blog.csdn.net/yjl13598765406/article/details/130871566

标签:vue,iframe,请求,url,xhr,token,myIframe
From: https://www.cnblogs.com/xiaoqilaile/p/17864005.html

相关文章

  • Vue3 + Express 实现大文件分片上传、断点续传、秒传
    前言在日常开发中,文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上,这在许多场景下都是必需的,比如网盘上传、头像上传等。但是当需要上传比较大的文件的时候,容易碰到以下问题:上传时间比较久;中间一旦出错就需要重新上传;一般服务端会对......
  • Copy网页中F12里的请求url到postman,并且把所有参数都带过来
    F12后找到对应链接然后Copy 在PostMan中导入链接 请求一下试试 转换代码网站-多种语言可供选择https://curlconverter.com/链接: 转换代码网站 本篇文章如有帮助到您,请给「翎野君」点个赞,感谢您的支持。作者:翎野君......
  • 【VUE基础】VUE3核心语法
    setupsetup是Vue3中一个新的配置项,值是一个函数,它是CompositionAPI“表演的舞台”,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup中。特点如下:setup函数返回的对象中的内容,可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreat......
  • 只需根据接口文档,就能轻松开发 get 和 post 请求的脚本,你会做吗?
     一般的接口文档描述的内容:开发get请求的脚本,接口文档的描述如下:在loadrunner里面创建一个空脚本:在action空白处,点击insert—>step输入web_custom_request,双击选择该函数,填入如下几个参数值:生成的脚本如下:运行编译,看有没有语法错误:在日志里面看到返回了cod......
  • VUE与WPF树形控件的区别与使用
    VUE:树形结构显示,主要在数据查询的时候把数据拼成树形结构的数据,注意:VUE中树形结构体必须要有children,此对象必须是list类型WPF:树形结构显示,是把所有的数据查询到,然后WPF中的控件通过ID和PID来自动把数据呈现成树形结构 ......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范
    项目代码同步至码云weiz-vue3-template要求代码规范,主要是为了提高多人协同和代码维护效率,结合到此项目,具体工作就是为项目配置eslint和prettier。editorconfig安装EditorConfigforVSCode插件,根目录下新建.editorconfig文件,增加以下配置[*.{js,jsx,ts,tsx,vue}]......
  • vue中组件之间数据共享
    1、父组件向子组件共享数据 2、子组件向父组件共享数据 3、兄弟组件之间的数据共享 ......
  • Vue中process.env关键字,process.env.VUE_APP_BASE_API
    Vue中process.env关键字,process.env.VUE_APP_BASE_API:https://blog.csdn.net/coinisi_li/article/details/128547778 vue分环境配置变量及打包:https://blog.csdn.net/weixin_44794123/article/details/121682978?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.......
  • 记录后端不同请求方式的接口,使用vue3框架下的前端axio请求不同写法
    一.后端接口:@GetMapping("/index")publicResponseResultindex(){..} 前端接口:indexInfo().then(res=>{if(res.data.code==200){ElNotification({message:res.data.data.msg||"加载成功",ty......
  • 输入框、文本域中内容底部有红色波浪线,如何去掉?vue2 html
    取消检查就不会有红色波浪线添加属性:spellcheck="false"1<el-input2type="textarea"3:autosize="{minRows:2,maxRows:40}"4placeholder="请输入内容"5v-model.trim="text"......