vue项目嵌套iframe链接

77 阅读1分钟

1、未加载完成时显示loading动画
2、可以设置iframe标签的宽高

<div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
     <iframe
        ref="iframe"
        id="iframeContain"
        name="iframeContain"
        seamless
        scrolling="yes"
        :src="com"
      />
</div>
iframeLoad() {
      this.loading = true;
      const iframe = this.$refs.iframe;
      // 兼容处理
      if (iframe.attachEvent) {
      // IE
        iframe.attachEvent("onload", () => {
        this.loading = false;
        });
      } else {
         // 非IE
        iframe.onload = () => {
        this.loading = false;
      };
}