vue iframe 另1个vue打包文件页面，但加载的时候需要等很长时间，怎么可以获取另1个vue页面加载完了？

发布于
2023-09-13 湖南

vue iframe 另1个vue打包文件页面，但加载的时候需要等很长时间，怎么可以获取另1个vue页面加载完了？

应该怎么做？

vue.js 编译打包

阅读 1.7k

AI BotBETA

可以通过监听iframe的加载事件来判断另一个vue页面是否加载完成。具体的做法是，在父页面中，给iframe元素添加一个load事件的监听器，当iframe页面加载完成时触发该事件，然后执行相应的操作。示例代码如下：

<template>
  <div>
    <iframe ref="myIframe" src="另一个vue打包文件页面的url" @load="frameLoad"></iframe>
  </div>
</template>

<script>
export default {
  methods: {
    frameLoad() {
      // 执行当iframe页面加载完成后的操作
      console.log("另一个vue页面加载完成");
      // 其他操作...
    },
  },
};
</script>

在以上代码中，通过给iframe元素添加了@load="frameLoad"事件监听，当iframe页面加载完成后，会触发frameLoad方法，然后你就可以在该方法中执行相应的操作，比如控制页面显示、更新数据等。

注意：需要将"另一个vue打包文件页面的url"替换为实际的URL。

3 个回答

发布于
2023-09-14 湖南

更新于
2023-09-18

✓ 已被采纳

我的解决方法：

第1步：

// 获取到iframe的页面
    const iframe = window.frames['iframeName']

    if (iframe) {
      // IE浏览器，判断iframe是否加载完成
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          // 加载完成
          loading.value = false // 这里如果已经获取到内页页面，关闭外层loading
        })
      } else {
        // 其他浏览器，，判断iframe是否加载完成，如Chrome、edge、safira
        iframe.onload = (e) => {
          // 加载完成
          loading.value = false // 这里如果已经获取到内页页面，关闭外层loading
        }
      }
    }

如果第1步已经获取内页的内容后（也就是iframe.onload时），外层的Loading已经关闭了。

第2步：
iframe内页的加载，是由内页的接口和代码判断是否显示或关闭内页的loading,

思路是2层loading，外层和内页各1个。

Riki一二三

发布于
2023-09-13 上海

这个laoding完全可以在iframe里面去做，外层不需要感知

抱歉_你想多了

发布于
2023-09-14 浙江

    <iframe frameborder="0" :src="REDRICT_PATH" @load="handlerLoad"></iframe>
    <div class="loading-box" v-show="showLoading">
      <img :src="Loading">
    </div>

    // showLoading: true

如图搞定,
让 loading 浮在 iframe 上面,
或者设置 css 做背景图,
onload 之后取消就好了,

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题