如何在应用内浏览器或 android 网页视图中隐藏 div

Question

我在 Hide div in a Custom Tab opened from a Trusted Web Activity 中问过一个问题让我再解释一下。

我的 twa 网站是 https://www.monsoonmalabar.com/ 在上面的站点中，有一个指向外部站点的 link，即 https://keralapsc.monsoonmalabar.com/ when clicking this link in twa app, this link opens in in-app browser. In that in-app browser(website: https://keralapsc.monsoonmalabar.com) 左侧有一个按钮浮动 link https://play.google.com/store/apps/details?id=com.monsoonmalabar.app.

我想在用户使用 twa（应用内浏览器）时隐藏 link（按钮）。根据您在 Whosebug 站点中的建议，我将外部 link 添加为 https://keralapsc.monsoonmalabar.com/?hideDiv=true
并在外部站点中添加了代码

<script>
  var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
if(url.searchParams.get("hideDiv")) {
  document.write('<div></div>');
} else {
  document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
}

</script>

现在发生的事情是在 twa 第一次访问时（hideDive=true）按钮消失了。但是，当我通过转到该外部站点按钮中的另一个页面继续浏览外部站点时，该按钮再次显示。也许我没有正确理解你。你能用代码解释一下吗？我是编码新手。我的 twa 应用是 https://play.google.com/store/apps/details?id=com.monsoonmalabar.app

下面是标记为link的外部截图

Answer 1

解决方案是将 hideDiv 信息保存到 sessionStorage 中，以便您在导航到其他页面时可以从那里加载信息。

代码看起来像这样：

<script>
  // Set `hideDiv` to `true` on sessionStorage when we receive the `hideDiv` parameter.
  const url = new URL(window.location.href);
  if(url.searchParams.get('hideDiv')) {
    sessionStorage.setItem('hideDiv', true);
  }

  // sessionStorage is persisted across page loads, but cleared if the tab is closed and
  // a new navigation session starts. We check if it's been set to `true` in this session.
  if(sessionStorage.getItem('hideDiv')) {
    document.write('<div></div>');
  } else {
    document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
  }
</script>

如何在应用内浏览器或 android 网页视图中隐藏 div

How to hide div in in-app browser or android webview

android-webview

inappbrowser

trusted-web-activity

twa