uni-app webview 安卓機 title顯示鏈接地址問題

uni-app webview 安卓機 title顯示鏈接地址問題

 

操作步驟：

任一外鏈地址，在安卓機上

預期結果： 

希望不顯示url

實際結果： 

顯示url

bug描述：

webview 頭部title在安卓上顯示html得title，並且再加載得過程中title顯示得是url

 

優化方案：利用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);
}