iframe跨域,获取iframe中元素
1.需求让iframe嵌入页面,并且没有滚动条,也就是相当于两个页面拼接在一起
- 跨域解决,通过框架配置代理
proxy: { '/medical': { target: 'https://example.com', changeOrigin: true, pathRewrite: { '^/medical': '', }, }, }
- 获取iframe宽度,并设置iframe宽度,使其不出现滚动条
<iframe ref="iframe" name="sonFrame" class="iframe hide-in-large hide-in-medium" width="100%" :height="height" marginWith="0" scrolling="no" src="/medical/example...." frameborder="0" ></iframe> this.iframe = this.$refs.iframe; // iframe加载完成后修改高度 this.iframe.onload = () => { this.height = this.iframe.contentDocument.body.scrollHeight; };
主要问题在于跨域之后无法获取iframe中元素,导致高度不获取,无法设置高度
++++++++++++++++++++++++++++++++++++++++++++++++++
4. 遇到新问题
- iframe元素在mobile端显示,通过样式在非mobile端隐藏,手机横屏的时候样式为pc端,此时iframe元素样式文字大小会变大以匹配更大尺寸的屏幕,但是当横屏之后并不会恢复原来的字体大小
- 解决:
-
- 通过v-if来进行重新渲染 => 缺点会进行重新网络请求
-
- 通过v-show 来进行元素的显示与隐藏 => 优点: 不会重新请求,但是在pc端也会进行dom的创建,此方法能够成功是因为在pc端尺寸的时候iframe不渲染出来不会响应式的改变文字大小
-
+++++++++++++++++++++++++++++++++++++++++++++++++++
5.微信浏览器/qq浏览器横屏切换回竖屏字体变大
由于微信浏览器与qq浏览器执行resize回调函数之后第一时间获取到的innerWidth 不是横屏之后的值因此需要,延时获取,然后重新渲染iframe
此时无法使用v-show,即使在resize时第一时间将iframe隐藏,但是iframe字体格式也已经变为了横屏尺寸字体
- 处理代码
<div class="mt-40"> <!-- 微信/qq浏览器需要重新加载iframe --> <iframe v-if="!isPc && isWeiXin" width="100%" marginWith="0" scrolling="no" src="/medical/ecp-cms/cdn-file/tac/content/WMS/0/TAC_MEDICAL.html" frameborder="0" ></iframe> <!-- 其余浏览器不需要重新渲染 --> <iframe v-show="!isPc && !isWeiXin" width="100%" marginWith="0" scrolling="no" src="example.html" frameborder="0" ></iframe>
computed: { // 判断是否为微信浏览器/qq浏览器 isWeiXin() { const ua = navigator.userAgent.toLocaleLowerCase(); return ( window.navigator.userAgent.includes('MicroMessenger') || ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null ); }, },
window.addEventListener('resize', () => { // 微信/qq浏览器 resize时第一时间获得的innerWidth值不是更新后的值,需要延时获取 const time = this.isWeiXin ? 100 : 0; setTimeout(() => { this.isPc = window.innerWidth > 719; }, time); });
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤