uniapp web-view setnavigationbartitle 后为啥还被修改如何解决

在uniapp中使用web-view组件时，通过setNavigationBarTitle设置了导航栏标题，但发现标题还是被修改了，这是什么原因导致的？有什么解决方法吗？

2 回复

在web-view中，setNavigationBarTitle可能被页面内JS修改。解决方法：在web-view的onMessage事件中监听页面变化，并重新设置标题。


在 UniApp 中，使用 web-view 组件时，通过 uni.setNavigationBarTitle 设置导航栏标题后，可能会被 web-view 内部加载的网页修改，这是因为网页可能包含自己的 JavaScript 代码（如 document.title 更改），导致标题被覆盖。

原因分析

  • 网页内部脚本：如果 web-view 加载的网页包含修改 document.title 的代码，它会触发 UniApp 的导航栏标题更新。
  • 默认行为：UniApp 的 web-view 组件会自动监听网页标题变化，并同步到导航栏。

解决方法

  1. 禁用标题同步：在 web-view 组件上设置 webview-styles 属性，禁用标题自动同步。

    <web-view src="https://example.com" :webview-styles="{ title: false }"></web-view>

    这样网页内的标题修改不会影响导航栏。

  2. 动态控制标题：如果仍需根据网页内容更新标题，可以通过 [@onPostMessage](/user/onPostMessage) 监听网页消息，手动设置标题。

    • 在网页中，通过 uni.postMessage 发送标题信息（需网页配合）。
    • 在 UniApp 中监听消息并调用 uni.setNavigationBarTitle。

    示例代码：

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

    methods: {
  handleMessage(event) {
    const data = event.detail.data;
    if (data.title) {
      uni.setNavigationBarTitle({ title: data.title });
    }
  }
}

    网页端需注入类似代码：

    // 网页内 JavaScript
document.title = "新标题";
uni.postMessage({ data: { title: document.title } });

  3. 使用页面生命周期：在 UniApp 页面的 onShow 或 onReady 中强制设置标题，确保每次进入页面时标题正确。

注意事项

  • 如果网页不可控（如第三方网页），优先使用方法1禁用同步。
  • 确保网页和 UniApp 的通信安全，避免注入恶意代码。

通过以上方法，可以有效解决 web-view 标题被意外修改的问题。

回到顶部