CSS Id 选择器阻止所有内容在 Android 10 上的 Xamarin.Forms WebView 中显示答案

【问题标题】：CSS Id selector stops all content from showing in Xamarin.Forms WebView on Android 10CSS Id 选择器阻止所有内容在 Android 10 上的 Xamarin.Forms WebView 中显示
【发布时间】：2021-10-02 20:13:32
【问题描述】：

我有一个 WebView，我将一个 HTML sn-p 分配给使用分配给 Source 的 HtmlWebViewSource。

自从面向 Android 10 以来，WebView 已停止显示所有内容。

我已经缩小了一个字符的范围，它可以区分内容显示和不显示内容。 HTML 包含一个<style> 部分。如果它包含...

hello {}

...然后显示内容。好像它包含...

#hello {}

...然后没有内容显示。（hello 不涉及任何内容。）

显然，# 字符表示一个 Id 选择器。

那么，为什么针对 Android 10 会突然因为 CSS 中如此简单的更改而让我的 HTML 停止显示？

我进一步缩小了范围。在<head> 标签中...

<style>#</style> -> 没有 HTML 显示

<style></style> -> HTML 显示。

<style>.</style> -> HTML 显示。

我仍在使用 Xamarin.Forms 4。

【问题讨论】：

标签： android xamarin.forms webview

【解决方案1】：

下面的代码对我有用。请检查一下。

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "hello" */
#hello {
  background-color: lightblue;
  color: black;
  padding: 30px;
  text-align: center;
}

/* Style all elements with the class name "Line" */
.Line {
  background-color: #9815B0;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<!-- An element with a unique id -->
<h1 id="hello">Page1</h1>

<!-- Multiple elements with same class -->
<h2 class="Line">Line1</h2>
<p>number 1.</p>

<h2 class="Line">Line2</h2>
<p>number 2.</p>

<h2 class="Line">Line3</h2>
<p>number 3.</p>

</body>
</html>

【讨论】：

当我删除
我实际上有几个 WebView。每一个都包含在一个 AbsoluteLayout 中，然后将一组布局分配给此控件 github.com/AndreiMisiukevich/CardView 的数据源。我使用 HTML sn-ps 的原因是因为当我尝试设置每个 WebView 的 Url 时，这个设置崩溃了。所以它是 UI 密集型的。

【解决方案2】：

我解决了这个问题。我正在使用从 WebView 派生的类和自定义渲染器，该渲染器继承自...

ViewRenderer<MyWebView, Android.Webkit.WebView>

我不知道我为什么这样做。它至少使人们能够从相关类（处理 Javascript）中引用渲染器上的方法，而不必将渲染器上的 Element 强制转换为从 WebView 派生的自定义类。

因此，我让自定义渲染器继承自标准 WebViewRenderer，并删除了创建本机控件并加载其 HTML sn-p 的代码，现在已自动处理。原生WebView的自定义跟以前一样。

我不知道为什么我不能再创建自己的原生 WebView 而不会遇到这个奇怪的错误。

【讨论】：