iframe 使用过程中碰到的问题处理

余人于RenYu

于 2024-08-30 10:19:31 发布

阅读量313

点赞数 2

分类专栏：相关问题处理文章标签：前端性能优化

本文链接：https://blog.csdn.net/Y_Cfeng/article/details/141710811

版权

一、iframe 嵌入第三方网站加载

场景：在使用 iframe 嵌入第三方网站时，可能因为性能，网络等各方面原因，导致加载速度过慢，使得停留在当前页面空白的时候较长，用户体验不好。
解决：由于是嵌入的第三方网站，可能无法对第三方网站坐一些处理，我们只能给当前页面加个加载动画，让其有一个过渡加载动画，直到加载出现内容，稍微提高用户的体验感。
实际使用

html 代码

<div v-loading="iframeLoaded" class="basic-knowledge">
    <iframe
      id="ifrmId"
      ref="iManageIframe"
      :src="iframeUrl"
      width="100%"
      height="100%"
      frameborder="0"
      name="ifrmName"
    ></iframe>
  </div>

js 处理代码

mounted() {
   this.iframeLoad('iManageIframe');
}
methods:{
	// iframeL加载动画 再mounted 调用
	iframeLoad(Iframe) {
  		this.iframeLoaded = true;
  		const iframe = this.$refs[Iframe];
  		if (iframe.attachEvent) {
     		// IE
     		iframe.attachEvent('onload', () => {
         		this.iframeLoaded = false;
     		});
  		} else {
      		// 非IE
      		iframe.onload = () => {
        		this.iframeLoaded = false;
      		};
  		}
	}
}