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);
});