uni-app webview标题问题

发布于 1周前 作者 caililin 来自 Uni-App

uni-app webview标题问题

问题描述

webview里面有AB两个页面 标题分别是A和B webview打开A页面标题自动更新为A 但是从A页面跳到B页面的时候 标题还是A

4 回复

那就需要看看跳到B页面去了之后document.title改变了没有


打印了一下 是改变了的

电脑微信小程序嘛

针对uni-app中webview组件标题处理的问题,通常我们需要通过配置和编程方式来动态设置或更新webview页面的标题。以下是一个具体的代码案例,展示如何在uni-app中实现这一功能。

首先,确保你的uni-app项目中已经集成了webview组件。然后,你可以按照以下步骤来设置和更新webview页面的标题。

1. 在pages.json中配置webview页面

首先,你需要在pages.json文件中为你的webview页面配置路由。例如:

{
  "pages": [
    {
      "path": "pages/webview/webview",
      "style": {
        "navigationBarTitleText": "默认标题"
      }
    }
  ]
}

2. 创建webview页面并设置标题

在你的pages/webview/webview.vue文件中,使用webview组件,并通过监听页面加载事件来动态更新标题。

<template>
  <view>
    <web-view :src="url" @loaded="onLoaded"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com' // 替换为你的目标URL
    };
  },
  methods: {
    onLoaded() {
      // 这里假设你的目标页面在加载完成后会通过postMessage发送标题信息
      uni.webView.onMessage(message => {
        const { data } = message;
        if (data && data.title) {
          uni.setNavigationBarTitle({
            title: data.title
          });
        }
      });

      // 如果目标页面没有发送消息,你也可以尝试通过执行JS来获取标题(需要目标页面配合)
      // uni.webView.evalJS(`document.title;`, result => {
      //   console.log('Page title:', result[0]);
      //   uni.setNavigationBarTitle({
      //     title: result[0]
      //   });
      // });
    }
  }
};
</script>

3. 目标页面发送标题信息(可选)

如果你的目标页面(即webview加载的页面)可以控制,可以在页面加载完成后通过postMessage发送标题信息给uni-app。例如:

// 在目标页面的JavaScript代码中
document.addEventListener('DOMContentLoaded', () => {
  window.parent.postMessage({ title: document.title }, '*');
});

以上代码展示了如何在uni-app中通过webview组件加载外部页面,并在页面加载完成后动态更新导航栏标题。注意,目标页面需要配合发送标题信息,或者你可以尝试通过执行JS代码来获取标题(这种方法需要目标页面允许跨域访问)。

回到顶部