uniapp web-view 如何判断加载完成

在uniapp中使用web-view组件加载网页时，如何准确判断页面是否加载完成？目前需要监听加载状态来执行后续操作，但找不到合适的事件或方法。请问有没有可靠的解决方案？

2 回复

在web-view组件中，可以通过@load事件监听页面加载完成：

<web-view src="https://example.com" [@load](/user/load)="onWebViewLoad"></web-view>

在methods中定义：

onWebViewLoad() {
  console.log('web-view加载完成')
}

当页面完全加载后就会触发load事件。


在 UniApp 中，web-view 组件本身不提供直接的加载完成事件，但可以通过以下方法判断页面加载完成：

方法一：使用 @load 事件（推荐）

在 web-view 上绑定 @load 事件，当网页加载完成时会触发。

<template>
  <web-view src="https://example.com" @load="onWebViewLoad"></web-view>
</template>

<script>
export default {
  methods: {
    onWebViewLoad() {
      console.log('网页加载完成');
      // 执行后续操作，例如隐藏加载动画
    }
  }
}
</script>

方法二：通过网页内通信（需控制目标网页）

如果目标网页可控，可通过 postMessage 与 UniApp 交互：

  1. 网页内代码（注入到目标网页）：
// 在目标网页中，当加载完成后发送消息
window.addEventListener('load', () => {
  if (window.parent !== window) {
    window.parent.postMessage({ type: 'WEBVIEW_LOADED' }, '*');
  }
});
  1. UniApp 代码：
<template>
  <web-view :src="url" @message="onMessage"></web-view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://your-controlled-page.com'
    };
  },
  methods: {
    onMessage(event) {
      const message = event.detail.data[0];
      if (message.type === 'WEBVIEW_LOADED') {
        console.log('网页加载完成（通过消息通信）');
      }
    }
  }
}
</script>

注意事项：

  • 跨域限制：方法二要求目标网页支持跨域通信，且需你能修改目标网页代码。
  • 简单场景：如果仅需基础加载完成提示，使用 @load 事件即可。
  • 加载失败处理：可结合 @error 事件处理加载失败情况。

根据你的需求选择合适的方法。如果目标网页不可控，建议使用方法一。

回到顶部