我可以将 JavaScript 和 CSS 注入 Xamarin 表单 WebView 吗？答案

【问题标题】：Can I inject JavaScript and CSS into Xamarin Form WebView?我可以将 JavaScript 和 CSS 注入 Xamarin 表单 WebView 吗？
【发布时间】：2019-04-23 12:49:43
【问题描述】：

我的 Xamarin Form WebView 会像这样加载一个外部网页，

<WebView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="<SOME_URL_HERE>" />

我需要隐藏网页的注入 JavaScript 或 CSS 的菜单。我还需要在通过应用程序加载网页时隐藏一些不必要的网页元素。

实现此要求的最佳方法是什么？如果有 JavaScript 或 CSS 以外的其他方式，也是可以接受的。

【问题讨论】：

标签： webview xamarin.forms android-webview

【解决方案1】：

WebView 提供了一个EvaluateJavaScriptAsync 方法（参见here），您可以使用它来执行JS。

例如，您可以订阅Navigated 事件（请参阅here）

<WebView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="<SOME_URL_HERE>" Navigated="WebViewOnNavigated" />

当WebView 导航到时，您可以从后面的代码执行您的JS

public async void WebViewOnNavigated(object sender, WebNavigatedEventArgs args)
{
    var webView = sender as WebView; // ommitting the null check, since nobody else will call this method
    await webView.EvaluateJavaScriptAsync("<Your JS goes here>");
}

【讨论】：

警报等简单的 JS 可以正常工作，但隐藏元素等不起作用。即使这段代码也不起作用var webView = sender as WebView;var js = "document.getElementsByClassName('header_top').remove();";await webView.EvaluateJavaScriptAsync(js);
@AMRoomi getElementsByClassName "返回所有子元素的类数组对象" (see here) - 要删除标题，您必须访问该集合的单个元素：document.getElementsByClassName('header_top')[0].remove();（我省略了对该元素是否真的存在的检查。）