如何在应用内浏览器或 android webview 中隐藏 div答案

【问题标题】：How to hide div in in-app browser or android webview如何在应用内浏览器或 android webview 中隐藏 div
【发布时间】：2020-07-02 04:01:23
【问题描述】：

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

我的 twa 网站是https://www.monsoonmalabar.com/ 在上面的站点中有一个指向外部站点的链接https://keralapsc.monsoonmalabar.com/，当在 twa 应用程序中单击此链接时，此链接将在应用程序内浏览器中打开。在该应用内浏览器（网站：https://keralapsc.monsoonmalabar.com）中，左侧浮动有一个按钮，链接为https://play.google.com/store/apps/details?id=com.monsoonmalabar.app。

当用户使用 twa（应用内浏览器）时，我想隐藏该链接（按钮）。根据您在 stackoverflow 网站上的建议，我将外部链接添加为 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

下面是标记的外部链接的截图。

【问题讨论】：

任何解决方案..

标签： android-webview inappbrowser trusted-web-activity twa

【解决方案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>

【讨论】：