vue项目嵌套iframe链接

最新推荐文章于 2024-08-22 09:05:48 发布

Q_v3_v2

最新推荐文章于 2024-08-22 09:05:48 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Q_v3_v2/article/details/134115192

文章介绍了在Vue应用中如何在未加载iframe内容时显示loading动画，以及设置iframe的宽高，同时提供兼容不同浏览器的onload事件处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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