判断iframe是否加载完成的完美方法

最新推荐文章于 2026-03-29 03:31:55 发布

原创最新推荐文章于 2026-03-29 03:31:55 发布 · 8.7k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#判断iframe加载完毕

收录于

前端常用方法专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Vue应用中使用适当的方法确保iframe在页面加载时正确完成加载，避免用户体验白屏。通过兼容性处理和事件监听实现无缝加载提示和关闭。

判断iframe是否加载完成的完美方法

需求：vue某个组件引入iframe，需要判断iframe是否加载完毕，不然用户进入是白屏加载中

created (){
使用加载提示框
}
  mounted () {
    const iframe = document.querySelector('#iframe')
    // 处理兼容行问题
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', () => {
        加载关闭提示框
      })
    } else {
      iframe.onload = () => {
       加载关闭提示框
      }
    }
  },