uni-app webview 安卓机 title显示链接地址问题

uni-app webview 安卓机 title显示链接地址问题

 

操作步骤：

任一外链地址，在安卓机上

预期结果： 

希望不显示url

实际结果： 

显示url

bug描述：

webview 头部title在安卓上显示html得title，并且再加载得过程中title显示得是url

 

最后好方案，webView的updatetitle 设置false，手动设置title（2023.3.21）

var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
currentWebview.children()[0].addEventListener('titleUpdate', ({ title }) => {
console.log('titleUpdate捕获==', title);
if (title.search('http') != -1) {
console.log('titleUpdate==捕获title==', title);
setTimeout(() => {
uni.setNavigationBarTitle({
title: ' ',
});
});
} else {
uni.setNavigationBarTitle({
title: title,
});
}
});

方案：利用webView的 :update-title="false" 和定时器来控制显示

1、先定义一个 update-title是否打开的开关

const updatetitle = ref(false);

2、在渲染阶段设置一个延迟执行。我实测前500毫秒，直接跳过去也行。当然读者根据具体实际设置也可。

onLoad(() => {
updatetitle.value = false;
});

onReady(() => {
if (uni.getSystemInfoSync().platform == 'android') {
setTimeout(() => {
runtime();
}, 500);
}
});

3、这里设置一个可循环的定时器。捕获title，由于一开始是空的，然后加载过程中是url，最后才是title，

我们可以设置一开始是updatetitle.value为false。直到有值后，updatetitle.value = true。实测效果改善很多。

function runtime() {
  let timer = setInterval(function () {
    var pages = getCurrentPages();
    var page = pages[pages.length - 1];
    var currentWebview = page.$getAppWebview();
    var title = currentWebview.children()[0].getTitle();
    console.log('title获取 = ' + title);
    if (title.search('http') != -1) {
      uni.setNavigationBarTitle({
        title: '   ',
      });
      setTimeout(() => {
        if (timer) {
          clearInterval(timer);
          timer = null;
        }
        updatetitle.value = true;
      }, 20);
    } else {
      if (title != 'null') {
        updatetitle.value = true;
        console.log('title有值 = ' + title);
        setTimeout(() => {
          if (timer) {
            clearInterval(timer);
            timer = null;
          }
          uni.setNavigationBarTitle({
            title: title,
          });
        }, 20);
      }
    }
  }, 20);
}